H5+class8

今天的内容就一点：

• 清除浮动的六种方式

·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
浮动元素相对于标准流的特点：
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之后, 外面的盒子不被顶下来