CSS浮动属性

CSS浮动

浮动属性在CSS页面布局中有着相当重要的作用，使一个页面变的完整美观

常见的页面布局

元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列，称之为标准文档流，这也是元素默认的排列方式。

标准文档流一般由块状元素以及内联元素组成：
其中常见的块状元素： h1-h6、p、div、列表…
常见的内联元素：span、a、img、strong…

那么我们知道，块状元素独占一行，写a,b两个元素，b元素会默认显示在a元素的下方，事实上，我们经常需要使两个块状元素同行显示，那么就需要用到今天的浮动属性（float） 注：inline-block也可以做到。

浮动属性 float

定义

指定元素在哪个方向上浮动。

属性值

• left - 元素向左浮动
• right - 元素向右浮动
• none - 元素不浮动，并且会显示在其在文本中出现的位置

浮动的特性

1.使浮动元素脱离文档流，让竖着的元素横着来。

这里是正常的块元素排列 三个不同大小的div是从上之下排列的，如果我们给div1添加float：left会有什么效果呢。


2已经和1重叠了，显示的元素是div1，意味着2浮动到了1元素的位置且被1元素覆盖，这种情况也就是2脱离了当前的文档。如果不给其他元素进行设置的话，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

如果要给三个元素横着排列，只需给三个元素全都设置浮动即可:
需要注意的是，浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素，也就是说设置右浮动当前元素会浮动到父元素的最右端或者碰到其他浮动元素。

2.浮动可以内联排列
浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这是浮动可以内联排列的特征。也就是说，浮动可以设置宽高，让默认横着的元素能正常设置宽高，内外边距 例如span,a标签，并且能够一行多个，是介于block和inline之间的存在。


我们可以看到，正常情况下内联元素即使设置了宽高也是无法生效的，如果有这个需求，那么只要加上浮动就可以了。

同时，内外边距也是可以生效的。

浮动的影响

浮动元素脱离文档流，如果父元素没有设置高度，将造成父元素高度塌陷；这个问题通常是使用clear清除浮动，来解决高度坍塌问题！具体细节会在下一章讲到。

by逆战班黄海杰