清除浮动的几种方式
- 给前面元素设置高度。(尽量不用)
- 给后面的盒子添加clear属性
取值 | 含义 |
---|---|
none | 默认取值,按照浮动元素的排序规则来排序 |
left | 当前元素不要找前面的左浮动 |
right | 当前元素不要找前面的右浮动 |
both | 不要找前面的左浮动和右浮动 |
注意点:当给某个元素添加clear属性后,该元素的margin失效。
- 隔墙法
3.1 外墙法:在两个盒子之间添加一个额外的块级元素,设置clear: both;
注意点:
① 外墙法可以让第二个盒子使用margin-top属性,但是不可以让第一个盒子使用margin-bottom属性。
② 所以不要设置margin,而是直接在额外标签设置height,实现margin的效果。
3.2内墙法:在第一个盒子中,所有子元素最后添加一个额外的块级元素,设置clear: both;
注意点:
① 内墙法可以让第二个盒子使用margin-top属性,也可以让第一个盒子使用margin-bottom属性。 - 伪元素选择器清除浮动
.class::after {
/* 设置添加子元素的内容是空 */
content: '';
/* 设置添加子元素为块级元素 */
display: block;
/* 设置添加的子元素的高度0 */
height: 0;
/* 设置添加子元素看不见 */
visibility: hidden;
/* 设置clear:both */
clear: both;
}
/* 用伪类清除浮动时,用此适配ie6以下 */
.box1 {
*zoom: 1;
}
- 利用overflow: hidden清除浮动
5.1 让超出标签的内容不显示
5.2 清除浮动
5.3 在父子元素中:给父元素设置此属性,子元素设置margin-top之后。父元素不会被顶下来