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;属性
网友评论