浮动布局所带来的影响以及如何清除浮动

Posted 2020-08-30 书山有路

 

　　在页面的布局过程中浮动是个好东西，我们经常会用到浮动布局，它可以使元素共享一行，极大的方便了我们的布局过程。但是很多人可能只是会用，对浮动的原理只是一知半解，如果没有清晰的认识到浮动所带来的影响以及如何清除浮动所带来的影响，那么面对代码量庞大的页面将会变得一头雾水。所以接下来我们来深入学习一下浮动布局，相信大家把浮动这个概念掌握的很清晰的时候，以后运用起来将会更加得心应手。

　　一. 什么是浮动布局？

　　　CSS 的 Float（浮动），会使元素向左或向右移动，使元素共享一行，类似于给元素加了inline-block的作用。在w3c中这样描述浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。接下来我们具体来看。

 

　　二. 浮动带来的影响

　　1. 脱离文档流，不占据页面空间

　　我们知道，css的块级元素比如说div在页面中默认是独占一行并且自上而下排列，也就是我们所说的流，也就是我们通常所说的标准流，接下来我们来看以下的案例：

　　html代码：

<div class="div1">150 * 100</div>
<div class="div2">100 * 150</div>
<div class="div3">300 * 200</div>    

　　css代码：

.div1{
    width: 150px;
    height: 100px;
    background: pink;
}
.div2{
    width: 100px;
    height: 150px;
    background: lavender;
}
.div3{
    width: 300px;
    height: 200px;
    background: skyblue;
}

效果如下图：

（一看这个颜色就知道楼主是个女孩纸，

以上是关于浮动布局所带来的影响以及如何清除浮动的主要内容，如果未能解决你的问题，请参考以下文章

css的浮动以及如何清除浮动

学习笔记：清除浮动的原理（BFC与hasLayout）

详解清除浮动的多种方法

浮动布局，以及如何清除浮动

清除浮动(带来的影响) clear与margin重叠

float与清除浮动的注意事项有哪些？