浮动布局
- 浮动是一种半脱离标准流的排版方式
- 没有居中对齐
- 使用 margin: 0 auto; 没有作用
- 不区分块级元素/行内元素/行内块级元素,因为这标准流中的概念
- 想要多个盒子顶部对齐可以设置其float
浮动的排序规则
- 相同方向的浮动元素,先浮动的显示在前面.因为浮动只会盖住标准流.
- 不同方向的浮动元素,左浮找左浮,右浮找右浮
- 浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来决定.
- 贴靠现象: 如果浮动的最后一个元素超过了父元素的宽度,会自动找上一个元素贴过去,如果宽度还是不够,继续找上一个~如果父元素宽度还是不够的话,那就只能凑合呆着了
- 图文混排
伪元素选择器
CSS给指定标签前或后添加子元素.
清除浮动
- 给前面一个父元素设置高度(在开发中最好不要设置高度,所以此方便不建议使用)
- 给后边的元素设置clear属性,(注意添加clear属性后margin属性就会失效)
- 隔墙法
3.1 外墙法
中间加个块级元素并设置clear: both (注意: 可以在第二个盒子使用margin-top,但是第一个盒子不能使用margin-bottom,所以一般既不设置第一个盒子的margin-bottom,也不设置第二个盒子的margin-top,而是直接设置额外块级元素的高度)
3.2 内墙法
块级元素写到第一个盒子最后面并设置clear: both(注意: 第一个盒子可以使用margin-bottom,第二个盒子也可以使用margin-top.额外块级元素也可以设置高度)
区别: 内墙法可以撑起第一个盒子的高度,而外墙法不可以.(改方法同样不建议使用,因为添加了额外的元素) - 使用伪元素 (建议使用)
.box1::after{
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.box1{
*zoom: 1; // 兼容IE6
}
- overflow: hidden(建议使用)
.box1{
*zoom: 1; // 兼容IE6
}