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

 

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

　　一. 什么是浮动布局？

　　　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;}

效果如下图：

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

0 0

• 浮动布局所带来的影响以及如何清除浮动
• 浮动布局所带来的影响以及如何清除浮动
• 浮动布局所带来的影响以及如何清除浮动
• 浮动布局所带来的影响以及如何清除浮动
• 如何清除浮动元素所带来的影响？
• 如何清除浮动带来的影响
• 清除元素浮动带来的影响
• HTML中清除浮动带来的影响
• 浅谈css中浮动和清除浮动带来的影响
• 浅谈css中浮动和清除浮动带来的影响
• 浅谈css中浮动和清除浮动带来的影响
• css的浮动以及如何清除浮动
• CSS中清除浮动的作用以及如何清除浮动
• html中清除浮动（float）带来的影响
• html 03 浮动布局以及清除浮动
• css中的浮动以及如何清除浮动
• 清除浮动影响的方法
• 浮动布局float带来的高度塌陷——清除浮动
• thphp引用第三方类库---IP定位
• Java代理
• 微信WeixinJSBridge API（屏蔽右上角按钮等）
• Android Studio 出现 Gradle's dependency cache may be corrupt 错误
• 重入锁--ReentrantLock
• 浮动布局所带来的影响以及如何清除浮动
• 变量与函数
• lua实现KMP字符串匹配。
• Android N Audio播放二：setDataSource窥探
• 反思一下
• tomcat远程debug配置详解，Eclipse结合
• mac下安装和使用MySQL-python
• leecode 解题总结：56. Merge Intervals
• ubuntu14.04系统下搭建支持https的apache2服务器