CSS 浮动规则

  • 浮动元素会从文档正常流中删除,但它仍会影响布局
  • 浮动非替换元素必须为其指定width,否则元素的width会趋于0而导致浮动元素不能完整显示
  • 一旦元素具有了浮动属性,它便成为了一个块级元素。
  • 浮动元素的左右外边界不能超出包含块的左右内边界
  • 浮动元素永不会重叠
  • 浮动元素不会超过容器的上padding
  • 后浮动的元素永不会超过先浮动元素的顶端
  • 浮动元素会尽可能高地放置,便这个高受限于规则6和规则7
  • 浮动元素的下边界没有要求,因此当容器不足以容下浮动元素时,浮动元素会向下延伸。但部分浏览器会采取增大容器高度以容下浮动元素,而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是:让容器也浮动
  • 浮动元素向下延伸时,不会影响正常文本的显示,文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住
  • 如果浮动元素设置了负的外边距、这将破坏规则4、6、7
  • 当浮动元素的width>容器的width时,这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定)
  • 浮动重叠规则:行内框(如strong)与浮动元素重叠时,其边框、背景、内容均位于浮动元素之上;块框与浮动元素重叠时,其边框、背景在浮动元素之下,而内容在浮动元素之上。
  • 对某个元素应用clear:left,意味着这个元素的左边不能有浮动元素。
  • clear不能用于非块级元素,比如<br/>,在大多数浏览器看来它是一个非块级元素,因此如果对br应用clear来清除浮动不会有任何效果,除非改变br的display:block。
  • 如果某元素应用clear清除浮动,则此元素设置的上外边距值会被忽略,但会有一个重新计算的上外边距值(甚至可能为0).如果希望此元素与浮动元素之间有一个明确的间隔,可以在浮动元素上设置下外边距。

原文地址:https://www.cnblogs.com/qianphong/p/10383658.html

时间: 2024-10-11 16:45:32

CSS 浮动规则的相关文章

验分享:CSS浮动(float,clear)通俗讲解

经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素

[[转]CSS浮动原理

CSS Float是网页设计最强大的灵活性功能之一.本文介绍CSS Float的基本原理和行为特征,并介绍各种浏器Float特性的Bugs. 内容 基本的浮动原理 浮动是如何进行的 浮动从何处开始 水平浮动堆叠 反向浮动 Clearing Floats 基本的浮动原理 任何元素 element 都可以被浮动.段落.div.list.tables,以及图像都可以被浮动,事实上即使是像 span 和 strong 这样的行内置元素也可以很好地进行浮动. 任何申明为 float 的元素自动被设置为一个

css浮动(float,clear)

1. 以div元素布局为例,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流,是指标准流中的div. 无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”,显然标准流已经无法满足需求,这就要用到浮动. 浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次. 2. 假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行):如果A元素上一个元素

(转)CSS浮动,你不知道的事

原文链接:http://www.cnblogs.com/zhujl/archive/2012/05/08/2489440.html 浮动到底做了什么? 浮动如何影响元素的盒模型? 浮动的元素和行内元素有何不同? 调整浮动元素的位置是通过什么规则进行的? clear属性如何工作,它的目的又是什么? 浮动甚至能绊倒有经验的开发者,理解浮动能帮助你解决很多CSS问题.即使你认为已经知道了浮动的所有知识,我们足够深入的分析也许也能让你学到一些新东西. 什么是浮动? CSS中的一些元素是块级元素,表示它们

css浮动属性逆战班

在前端编程中,css浮动属性的使用是必不可少的.css浮动是一种使元素脱离文档流的方法,会使元素向左或向右移动,其周围的元素也会重新排列,这是一种非常有用的布局方式,它能够改变页面中对象的前后流动顺序.这样做的好处是,使得内容的排版变的简单,具有良好的伸缩性.浮动:float :left/right/none依次为:左浮动,右浮动和没有浮动 元素添加浮动之后,就飘起来了,原本在标准文档流里额位置就不在占有了,后面的内容会把位置补上去. 如果有N个元素要在一排并列显示,那么着N个元素都需要添加浮动

CSS浮动的3个特性(高手绕行)

1.  浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示: 代码示例: 1 <!DOCTYPE HTML > 2 <html> 3 <head> 4 <meta charset='utf-8'/> 5 <title>浮动元素的性质</title> 6 <style type="text/css"> 7 *{ 8 margin:0; 9 padding:0; 10

css浮动(folat),清除浮动(clear)

css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右浮动 html文档流:自窗体自上而下分成一行一行,并在没行中从左到右的顺序排放元素. 通过例子来解释浮动 1.页面上有两个块元素,每个块元素独占一行 2.我们希望他们能并排显示,这是就可以使用float,我们先给红色的div加float:left,发现两个是在一行了,但是他们重叠在了一起. 3.这是

[转] 常用的CSS命名规则

(一)常用的CSS命名规则  头:header  内容:content/container  尾:footer  导航:nav  侧栏:sidebar  栏目:column  页面外围控制整体布局宽度:wrapper  左右中:left right center  登录条:loginbar  标志:logo  广告:banner  页面主体:main  热点:hot  新闻:news  下载:download  子导航:subnav  菜单:menu  子菜单:submenu  搜索:searc

css浮动和清除浮动

浮动存在的原因 在word排版中,文本可以环绕图片.在css中,想要实现文字环绕的效果,只能借助于float,没有其他的替代方式.在实际中,文档的布局经常会使用浮动. float属性 float属性,默认为none,也就是标准流通常的情况.如果将float的属性的值设置为left或right,元素就会向其父元素的左侧或右侧紧靠. inherit表示从父元素继承float属性的值. clear属性 clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为