标签：浮动 both 模型 元素 文档 设置 clear 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。