什么时候要做到“一个浮动，全部浮动”？需要把浮动元素包裹起来和不浮动的元素区分开？

首页课程实战体系课手记专栏慕课教程

来源：4-9 小慕医生项目开发（6）

慕姐5289795

2021-04-28 17:11:34

问题描述：

news区域的h3标签没有浮动，但其兄弟元素hot_new和new_list均左浮动了，且我忘记把后两个包裹起来了，浮动不是会脱离标准文档流吗？为什么h3没有被覆盖？

相关截图：

相关代码：

.content .news_and_notice {
    width: 1200px;
    margin: 0 auto;
    margin-top: 56px;
    /* overflow: hidden; */
    background-color: pink;
}

.content .news_and_notice .news {
    float: left;
    width: 870px;
}

.content .news_and_notice .notice {
    float: left;
    width: 330px;
}

.content .news_and_notice .news h3 {
    font-size: 16px;
    padding-left: 6px;
    margin-bottom: 27px;
}

.content .news_and_notice .news .hot_new {
    float: left;
    width: 422px;
    margin-right: 18px;
}

.content .news_and_notice .news .new_list {
    float: left;
    width: 390px;
}

写回答

1回答

好帮手慕然然

2021-04-28

同学你好，关于同学的疑问解答如下：

1、关于浮动脱离文档流的问题：

浮动元素虽然脱离了文档流但是仍然会占据位置，其他盒子的文本内容会按照顺序继续排列。如下图所示，对所有的div元素都设置了浮动，然后看到这几个div并不会重叠，而是会顺序排列，而且其他盒子中的文本内容也会按照顺序继续排列。

2、关于h3元素覆盖问题：

代码中h3元素没有设置浮动属性，它是一个正常元素，在页面中是占据空间的，其他元素只会按照顺序继续排列，而不会覆盖它。

3、关于浮动使用问题：建议参考以下示例来理解

假设在页面布局过程中，使用三个div盒子实现左中右布局，因为三个div都是块元素，自己独占一行，而我们如果想实现三个div块元素并列显示在一行，那么就要给三个div元素都设置float浮动属性，将其浮动到一行，此时需要注意的是：要把浮动元素包裹起来和不浮动的元素区分开，便于清除浮动带来的影响，如图