什么是浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
我们来看几个例子
-
请看下图：当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘
-
请看下图： 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
-
请看下图：如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”
实现浮动
在 CSS 中，我们通过 float 属性实现元素的浮动。float 属性定义元素在哪个方向浮动。其可能值有：
- left 元素向左浮动
- right 元素向右浮动
- none 默认值，元素不浮动
- inherit 规定从父元素继承float属性的值。
清除浮动
我们先来了解一下CSS标准文档流，说白了就是一个“默认”状态。元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
但是我们在布局的时候，由于某些原因（当使用浮动、绝对定位、固定定位）会使文档脱离标准流，其中浮动会影响标准流的排列。
我们浮动的目的，就是可以把多个块级元素放到想要的一行上。
清除浮动的原因：因为浮动会影响标准流，比如浮动造成的父级高度塌陷问题
清除浮动的方法
1、使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲）
-
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题
-
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
-
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
-
建议：推荐使用，建议定义公共类，以减少CSS代码
.clearfix:after{
content:""; /*设置内容为空*/
height:0; /*高度为0*/
line-height:0; /*行高为0*/
display:block; /*将文本转为块级元素*/
visibility:hidden; /*将元素隐藏*/
clear:both; /*清除浮动*/
}
.clearfix{
zoom:1; /*为了兼容IE*/
}
2、添加新的元素对其应用 clear:both
-
原理：添加一个空元素，利用css提供的clear:both清除浮动，让父级div能自动获取到高度
-
优点：简单，代码少，浏览器支持好，不容易出现怪问题
-
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空页面标签，造成结构的混乱。
-
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
//对添加的元素使用 clear:both
.clear{clear:both;}
<div class="box">
<div class="red" style="float:left;">1</div>
<div class="sienna" style="float:left;">2</div>
<div class="blue" style="float:left;">3</div>
//添加一个新元素
<div class="clear"></div>
</div>
3、父级div定义overflow:hidden
- 原理：使用overflow:hidden时，浏览器会自动检查浮动区域的高度
- 优点：简单，代码少，浏览器支持好
- 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
- 建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
.over-flow{ overflow:hidden; zoom: 1;}/*zoom1; 是在处理兼容性问题*/
<div class="box over-flow">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
4、父级div定义overflow:auto
- 原理：使用overflow:auto时，浏览器会自动检查浮动区域的高度
- 优点：简单，代码少，浏览器支持好
- 缺点：内部宽高超过父级div时，会出现滚动条。
- 建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
.over-flow{ overflow:auto; zoom: 1;}/*zoom1; 是在处理兼容性问题*/
<div class="box over-flow">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
5、父级定义高度height
只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题不推荐使用，只建议高度固定的布局时使用。
6、父级display设置成table
原理是将div属性变成表格，可能会产生新的未知问题，不推荐使用，只作了解。
网友评论