float-浮动

浮动设置之处是为了适用于文字的环绕,后来发现用浮动能解决一些页面布局中的问题,就用于页面的布局上了。float可以设置float:left | right | none.

设置浮动的元素有以下特性:

1.设置float的元素  会脱离文档流,往设置的方向进行浮动,直到遇到父级的边界或者其他的浮动元素 就会停止。如图示


2.浮动的元素撑不开父级的高度

3.浮动对块级元素的影响:设置浮动之后,块级元素的宽度不再跟随父级宽度,而是内容决定(内容撑开宽度)

4.浮动对行级元素的影响:可以设置这个元素的尺寸以及按照盒模型对其解释描述

清除浮动的方法

1.给父级设置高度

2.clear:left | right | both;只能清除设置元素上面的浮动

3.父级div设置overflow:hidden;

对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

4.通过after伪元素清浮动:如图示


推荐阅读更多精彩内容