今天的内容就一点：
- 清除浮动的六种方式
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
浮动元素相对于标准流的特点：
1.在标准流中内容的高度可以撑起父元素的高度
2.在浮动流中浮动的元素是不可以撑起父元素的高度的
清除浮动的六种方式：
- 1、方式1：给前面一个父元素设置高度
特点：基本不用 - 2、方式2：clear属性
特点：none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素
注意：视频中讲解的元素添加clear后margin属性会失效，实验表明现在不会失效了。 - 3、方式3：外墙法
步骤：1.在两个盒子中间添加一个额外的块级元素
2.给这个额外添加的块级元素设置clear: both;属性
注意点:
外墙法它可以让第二个盒子使用margin-top属性
外墙法不可以让第一个盒子使用margin-bottom属性
以上将的BUG现在已经不存在，可以正常设置 - 4、方式3：内墙法
1.在第一个盒子中所有子元素最后添加一个额外的块级元素
2.给这个额外添加的块级元素设置clear: both;属性 - 5、方式4：伪元素选择器配合使用
格式：
有两种取值 ::after ::before
比如有两个div，分别命名为box1和box2
这个时候以::after为例子给box1添加伪元素清除浮动：
.box1::after{
/*设置添加的子元素的内容为空*/
content: "";
/*设置添加的子元素为块级元素*/
display: block;
/*设置添加的子元素的高度为0*/
height: 0;
/*设置添加的子元素看不见*/
visibility: hidden;
/*给添加的子元素设置clear: both;*/
clear: both;
}
.box1{
/*兼容IE6*/
*zoom:1;
注意：最后写的*zoom:1是用来兼容老版本的浏览器
- 6、方式6：overflow:hidden；
overflow作用：
可以将超出标签范围的内容裁剪掉
清除浮动
可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来
