css样式--浮动详解

1.文档流

        就是在页面布局中的"规矩"，针对块级元素、内联元素、内联元素中的行内块而言。

        （行内块元素是特殊的内联元素，包括<img> <input> <button>）

（1）文档流的规则

元素在文档流中的书写顺序规则 

按照元素分类的书写顺序

——块级元素从上向下排列的方式顺序

——内联元素和行内块元素从左向右排列的顺序

元素在文档流中的占位规则

按照元素分类的占位

——块级元素默认自占父元素的一行

——内联元素默认不自占一行，当父级宽度不够时才会换行显示[浮动会导致内联元素和行内块变成块级]

元素在文档流的补全规则

——当一个元素在页面中消失（删除标签或者display：none），后面的紧挨着的兄弟元素，会向前一个兄弟的位置占位（上位）

元素的包裹规则【特别】

默认元素都保持着自己的显示形式（display），同时受子元素或者内容的影响。

内联元素：文字内容影响内联元素的宽高

块级元素：直接子级元素影响它的宽高

行内块：特殊没有包裹内容

（2）脱离文档流

浮动就会脱离文档流，不再遵循文档流的规则

指元素不再按照文档流规则进行，脱离了文档流的规则。

2.元素的浮动属性

元素浮动的终极目的：是让块级元素可以横向排列，以完成多种布局的页面效果

float: left; 元素向父级元素的左侧浮动

float: right;元素向父级元素的右侧浮动

3.问题

——浮动元素会盖住（影响）后面兄弟元素，导致布局错乱。解决方案：所有兄弟元素都浮动

——当元素浮动时本该影响后面的兄弟元素，但是如果兄弟元素本身是内联元素或者是行内块，并不会被遮盖而会形成环绕浮动元素的效果。解决方案：所有兄弟都浮动

——浮动元素宽度相加小于父元素宽度，会导致浮动元素换行【正常现象】

4.子元素浮动父元素高度坍塌（重要）

        如果父元素本身没高度，其高度是靠子级元素撑开的，当子元素浮动，导致父级元素不再被子元素撑起高度，于是父元素高度坍塌。

（1）解决方案一：

父元素自己设置高度，可参照子元素们的高度

（2）解决方案二：（常用）

当子元素高度未知，父元素无法靠自己设置高度保证与子元素同高时，利用父元素的BFC特性，overflow：hidden、auto。此种办法只解决浮动脱离文档流，不解决其他情况的脱离文档流

（3）使用伪元素和clear属性（常用）

.clearfix::after{

      content: "";

      display: block;

      clear: both;

}

（4）父级元素正好也浮动

不推荐，会对父集的兄弟元素产生影响