CSS：标准盒模型，浮动

IE：

会压缩内容部分 达到设置padding和border 的时候不会增大盒子的宽高。

 

标准盒模型：

默认值：盒子的实际宽高会加上padding、border。

盒子的宽高只包含了content的内容部分。

box-sizing：border-box；

 

文档流：

概念：

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中

特点：（块元素，行内元素）

所有的块级元素在父元素直接从上到下排列。

所有的行内元素在父元素中从左到右排列。

 

浮动：

什么是浮动？

　　元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止(会挨着父元素左边或右边排列，如果之前有浮动的饿元素 会挨着浮动的元素排列)

 

float：left、right、none

特性：

1. 脱离文档流；
2. 会影响其他元素的显示方式；
3. 其他元素会当作浮动元素不存在；
4. 行内元素设置了浮动之后 会被当作inline-block元素解析；
5. 块级元素浮动之后 宽度默认不会是父元素的100%； 需手动设置；
6. 不管怎么浮动 都在父元素里面；
7. 如果父元素没有高度 子元素不会撑开父元素；

 

清除浮动：

清除其他浮动元素带给我们的影响；

clear left；

clear right；

clear both；（最常用）

原理：

父元素和冗余元素的高度都为0，并且浮动元素会盖在其上方，当设置clear：both时，冗余元素会躲开浮动元素直到不被其盖住，而父元素为了包裹住他自然就撑开了

 

解决办法

给父元素加高度；

BFC布局；

overflow：hidden；

display：block；

 

在父元素的浮动子元素后面后面加一个空div标签，清除浮动；

给父元素设置为元素；空div加强版；

::after{

clear：both;

content：‘ ‘；

}

 

标签：浮动,both,模型,元素,文档,设置,clear,CSS
来源： https://www.cnblogs.com/LIXI-/p/16486065.html