前端知识点之样式中的元素浮动

浮动：float;

定义：使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来；

浮动元素是同时处于常规流内和常规流的元素，其中块级元素认为浮动元素不存在，而浮动元素会影响行内元素的布局；

因此浮动元素通过影响行内元素的布局来间接影响包含块的布局；

1. 常规流：页面从左往右，从上到下排列的元素流是常规流；
2. 脱离常规流：绝对定位，fixed定位的定位的元素有自己固定的位置，脱离了常规流；
3. 包含块：一个元素离他最近的块级元素就是他的包含块；

注意：浮动元素虽然不能够直接影响包含块的布局，但是可以通过以下方法撑开包含块：

此种方法称之为 闭合浮动

overflow:hidden;

浮动元素遵循的规则：

1. 尽量靠上
2. 尽量靠左
3. 尽量一个挨着一个
4. 不能超出包含块 ，除非元素比包含块更宽‘；
5. 不能超过所在行的最高点，
6. 不能超过他前面浮动元素的最高点
7. 行内元素绕着浮动元素摆放，左浮动元素的右边和右浮动元素的左边会出现行内元素