CSS基础-清除浮动

清除浮动

清除浮动

盒子高度问题
  • 在标准流中内容的高度可以撑起盒子的高度
  • 在浮动流中浮动元素内容的高不可以撑起盒子的高
清除浮动方式一
  • 给前面的父盒子添加高度
  • 注意点:在企业开发中能不写高度就不写高度, 所以这种方式不常用
清除浮动方式二
  • 利用clear:both;属性清除前面浮动元素对我的影响
  • 注意点:使用clear:both之后margin-top属性会失效, 所以不常用
清除浮动方式三
  • 在两个有浮动子元素的盒子之间添加一个额外的块级元素
  • 注意点:在外墙法中可以通过设置额外标签的高度来实现margin效果搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以不常用
清除浮动方式四
  • 在前面一个盒子的最后添加一个额外的块级元素
  • 注意点:外墙法会自动撑起盒子的高度, 所以可以直接设置margin属性,和内墙法一样需要添加很多无意义的空标签,有违结构与表现的分离
清除浮动方式五
  • 给前面一个盒子添加overflow:hidden属性
  • 注意点:由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性,IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;
清除浮动方式六
  • 给前面的盒子添加伪元素来清除浮动
  • 示例代码
html

  • 注意点:本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素;添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性;CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西

你可能感兴趣的:(CSS基础-清除浮动)