前端基础CSS3之清除浮动

清除浮动

• 方式一：外部盒子添加高度属性撑起来即可

• 方式二：外部盒子添加clear : both;属性，但该盒子的margin属性失效

• 方式三：外墙法，在两个盒子之间添加一个额外的块级元素，并给该元素添加clear : both:属性<!--只能设置第二个盒子的margin-top属性，不能使用第一个盒子的margin-bottom属性，一般直接设置中间块级元素的高而不设置两个盒子的属性-->（外墙法可以当作公共类因子，添加到需要的地方）

• 方式四：内墙法，在第一个盒子内部最后的位置设置一个块级元素，并给该元素添加clear : both:属性

• 方式五：伪元素选择器，给指定标签的内容前后和后面添加一个元素(块级元素)

  div::before{
      content:"内容"；
      其他属性：值
  }
  div::after{
      content:"内容"；
      其他属性：值;
  }

   

• 方式六：在盒子中添加属性overflow:hidden（不同浏览器兼容问题，在盒子中加入属性*zoom:1;即可解决）

• 属性overflow:hidden作用：

  1.可以将超出标签范围的内容裁剪掉

  2.可以清除浮动

  3.可以让嵌套关系的里面的盒子设置margin-top属性后，外面的盒子不被同时顶下来，作用同给外面的盒子加边框属性