关于float的一些理解

Float是否脱离文档流,一个父元素不设置overflow的话,子元素float,就不会把父元素撑开,换句话说,他就不会有高度,但是做个demo:父元素overflow:hidden; 子元素前两个float,第三个不float,结果是第三个没有clear浮动的元素,跟float的元素出现在同一个位置,前提是这三个元素都是块元素。如果是行内元素的话,浮动元素则会跟行内元素争抢空间。

总结一下:

1.float起初是为了解决文字环绕的问题而产生的。

2.元素float的时候,该元素自己的display会变为block。

3.父元素如果不加overflow:hidden的时候,不会出现在父元素内,或者父元素不被该元素撑开,没有高度。

4.float元素会占据行内元素的空间,会影响周围行内元素的位置。

5.float元素不会占据块级元素的空间,下一个块级元素会当没有浮动元素的出现,而出现在浮动元素的位置;这个现象出现的解决办法就是为clear属性赋值,left,right,或者both。

6.clear会根据值清除不同浮动对该元素影响,left清除左浮动,意思就是float:left的元素会占据文档中块元素的位置,以此类推。

7.浮动在IE7这个喝三鹿牛奶长得浏览器下会出现很多bug,让人匪夷所思,比如一行内左右浮动算两行;多个浮动,倒数第二个又间距;多个浮动阶梯排列等问题。

最后附上一段代码,大家看看:

<div style="overflow:hidden">
	    <span style="width:100px;background:yellow;">11111</span>
	    <div style="width:100px;height:100px;float:left;background:red"></div>
	    <div style="width:100px;height:100px;float:left;background:blue"></div>
	    <div style="width:100px;height:120px;float:right;background:red"></div>
	    dsadsadsa
	    <span style="width:100px;background:yellow;">22222</span>
	    <div style="width:200px;height:200px;background:green"></div>
	    <div style="width:100px;height:100px;float:left;background:blue"></div>
</div>
效果图片:



©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页