前端CSS之浮动
前端CSS之浮动
由于标准流（div等）不能完全满足我们对布局的需求，所以需要浮动自由的对盒子进行排布。
语法：
选择器 { float:属性值；}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动特性：
-
浮动的盒子不会再保留原来的位置，会被标准流占有。就好比排队，前面的人走了不排队了那么我们就可以去他的位置上。
-
如果多个盒子都设置了浮动，则它们会按照属性值在一行内显示并且顶端对齐排列。（如果某个盒子高度比其他盒子高度高，那么该盒子的上边缘与其他盒子上边缘对齐）
-
浮动的元素是贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
-
浮动元素会具有行内块元素特性（如果行内元素有了浮动属性，则不需要转换块级/行内块元素就可以直接给height和weight）。
-
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
注意：
浮动元素经常和标准流的父级搭配使用，也就是说我们可以把元素放到大盒子里，再对大盒子里的元素添加浮动，如下图：
为了约束浮动元素位置，我们网页布局一般采取的策略是：
- 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。符合网页布局第一准则。（父元素管上下，子元素管左右）