黑马程序员技术交流社区

标题: 广州前端-元素浮动后, 页面布局出现的常见问题 [打印本页]

作者: 李盼盼老师 时间: 2017-12-5 17:16
标题: 广州前端-元素浮动后, 页面布局出现的常见问题
本帖最后由李盼盼老师于 2017-12-21 20:07 编辑

【前言】
初入前端，在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;

}

作者: bbg123 时间: 2017-12-5 20:21
沙发

作者: 温烟花 时间: 2017-12-5 22:47
二楼

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2