CSS 浮动(float)注意点

浮动布局

1. 浮动是一种半脱离标准流的排版方式
2. 没有居中对齐
3. 使用 margin: 0 auto; 没有作用
4. 不区分块级元素/行内元素/行内块级元素,因为这标准流中的概念
5. 想要多个盒子顶部对齐可以设置其float

浮动的排序规则

1. 相同方向的浮动元素,先浮动的显示在前面.因为浮动只会盖住标准流.
2. 不同方向的浮动元素,左浮找左浮,右浮找右浮
3. 浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来决定.
4. 贴靠现象: 如果浮动的最后一个元素超过了父元素的宽度,会自动找上一个元素贴过去,如果宽度还是不够,继续找上一个~如果父元素宽度还是不够的话,那就只能凑合呆着了
5. 图文混排

伪元素选择器

CSS给指定标签前或后添加子元素.

清除浮动

1. 给前面一个父元素设置高度(在开发中最好不要设置高度,所以此方便不建议使用)
2. 给后边的元素设置clear属性,(注意添加clear属性后margin属性就会失效)
3. 隔墙法
   3.1 外墙法
   中间加个块级元素并设置clear: both (注意: 可以在第二个盒子使用margin-top,但是第一个盒子不能使用margin-bottom,所以一般既不设置第一个盒子的margin-bottom,也不设置第二个盒子的margin-top,而是直接设置额外块级元素的高度)
   3.2 内墙法
   块级元素写到第一个盒子最后面并设置clear: both(注意: 第一个盒子可以使用margin-bottom,第二个盒子也可以使用margin-top.额外块级元素也可以设置高度)
   区别: 内墙法可以撑起第一个盒子的高度,而外墙法不可以.(改方法同样不建议使用,因为添加了额外的元素)
4. 使用伪元素 (建议使用)

.box1::after{    content: '';    display: block;    height: 0;    visibility: hidden;    clear: both;}.box1{    *zoom: 1;   // 兼容IE6}

1. overflow: hidden(建议使用)

.box1{    *zoom: 1;   // 兼容IE6}