CSS学习17：浮动

浮动语法：

选择器 { float: 属性值; }

 

浮动特性

1、浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)

2、浮动的元素会一行内显示并且元素顶部对齐，且之间没有空隙，如果父元素一行装不下，会另起一行。

3、浮动的元素会具有行内块元素的特性，浮动元素的大小根据内容来决定。

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置, 我们网页布局一般采取的策略是:

​ 先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧

 

浮动布局注意点

 1、浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.