更多前端资源请查看

【前言】
初入前端，在div+css布局中，元素浮动是最常见的问题之一，那么下面给大家总结一下，元素浮动后会出现的现象以及解决的办法

• 父元素的子元素浮动后，父元素不清除浮动，父盒子的高度将会消失，那么我们的整个页面的布局都会发生错乱!如下图：
  

      

• 父元素的子元素浮动后，给了父元素一个固定高度，但父元素下面的盒子的布局出现错乱，如图：
  

      


        其实是因为，11111，22222，33333这三个模块的height是81px，44444这个模块的height是80px；而它们的父元素banner的高度也设置为80px；那么浮动的元素的高度就比它们的父元素的高度还高。
       由于banner里面的元素是浮动的，那么它们和设置了左浮动的text文本框处于同一个浮动流，那么text文本框就会跟在33333这个模块后面！，如图所示：
      

        浏览器放大后，可清晰的看到；
        

• 为了避免我们的布局受浮动的影响，那么只要我们父元素里面的子元素浮动了，那么就给父元素用清楚浮动，不建议给父元素直接设置高度，建议使用伪元素法清除浮动
  

        

• 开发中清除浮动的常用写法:
  

[CSS] 纯文本查看 复制代码

.clearfix:before,
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix{
    *zoom:1;
}

沙发

二楼