float、clear、overflow

时间:2024-06-12 15:34:38

浮动:

float:  none|left|right

作用使得标签失去块级标签的独占一行效果,向某个方向靠拢

标签浮动了,也需要占地方,有时候出现未浮动的div覆盖部分浮动div是浏览器的bug情况

使用display属性在表面上看来也可以达到浮动的效果,但是width和height属性会失效

清除浮动

clear: none|left|right|both

clear表示的是你的需求,通过改变自己的位置达到。

clear=“left”的意思就是这个控件左边不允许出现浮动

如果左边出现浮动,无法改变浮动的控件,只能将自己往下移,避开,直到左边没有浮动的情况为止

例如img、input等行级标签也可以设置浮动,但是使用不浮动的空间无法clear属性无法达到清除浮动的效果。不是很理解这点。

如果在一个div中的所有的元素都经过浮动,那么该div的height和width属性会是失去效果。可以使用在控件中插入空的div,设置div的clear属性为all就可以了

溢出处理

overflow:

visiable:默认值。内容不会被修剪,会呈现在盒子之外

hidden:内容会被修剪,并且其余内容是不可见的

scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余内容

auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容(当然内容默认是不会被修剪的,所以它的效果和visiable一样)