清除浮动流方式

1.清除浮动的第一种方式

给前面一个父元素设置高度

注意点:在实际开发中, 我们能不写高度就不写高度, 所以这种方式用得很少

2.清除浮动的第二种方式

给后面的盒子添加clear属性

CSS clear属性

取值：left   告诉浏览器不要去找前面的左浮动元素

right    告诉浏览器不要去找前面的右浮动元素

both    不要去找前面的左浮动和有浮动元素

none    默认取值，按照浮动元素的排序规则来排序

注意：使用这种清除浮动方式会使margin属性会失效

3.清除浮动的第三种方式

隔墙法：（在实际开发中不常用）

1)、外墙法：在2个盒子之间添加一个额外的块级元素，给这个额外的块级元素添加clear: both;属性

注意点：外墙法它可以让第二个和i子使用margin-top属性

外墙法不可以让第一个盒子使用margin-bottom属性

这个额外的盒子可以设置多个类名 第一个类名可以设置clear属性 第二个类名可以设置高度

2)、内墙法：在第一个盒子中所有子元素最后添加一个额外的块级元素

给这个额外添加的块级元素设置clear: both;属性

注意点:内墙法它可以让第二个盒子使用margin-top属性

内墙法它可以让第一个盒子使用margin-bottom属性

外墙法和内墙法区别?

外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度

4.清除浮动的第四种方式

使用伪元素选择器的方式可以清除浮动

本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样

注意点:IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性

使用伪元素清除浮动示例

5.清除浮动的第五种方式

overflow:hidden；作用：1.可以将超出标签范围的内容裁剪掉   2.可以清除浮动

3.如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，外面一个盒子也会被顶下来，如果外面的盒子不想被一起顶下来，那么可以通过overflow:hidden；让里面的盒子设置margin-top之后, 外面的盒子不被顶下来

注意点:IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性