float是css中很重要的一个属性,(最初是为了做图片环绕技术)后面被人们常用于页面布局。
我个人对于浮动的理解:当对于一个元素设置浮动属性的时候,首先这个元素先向外平移一个平面,然后往设置的方向进行浮动,直到遇到父级的边界或者其他的浮动元素就会停止,现在所在的平面就不是以前那个平面了,相应的之前的位置也不复存在了,所以就有了脱离文档流这一说。因为他脱离了文档流,不在之前的那个平面了,所以当父级没有设置高度时,就没有内容撑开了。然后就有了页面塌陷这么一说。所以说到底,他们的根源都是因为浮动元素脱离文档流所导致的。那么问题来了,我们应该怎样解决这些问题了?
1.刚才说了,父级元素没有设置高度时,浮动元素脱离文档流后没有内容支撑,就没了高度。所以我们可以自己给父级一个高度就可以解决了。
2.刚才说到了,浮动元素脱离文档流后上升到了另外一个平面,所以父级里面没有东西支撑可以导致页面塌陷,那么我们能不能想一个办法让父级也到这一个平面了?父级如果也到这个平面之后,不就有东西支撑了吗?然后我们是不是就可以让父级也浮动?
3.对于清除浮动有一个属性专门清除浮动所带来影响的clear:left/right/both;添加新的元素 、应用 clear:both;
4.是对3的拓展,因为你这样就会多一段代码,所以就想到了伪元素。父级::after{display:block;(必须要有的)content:"";(必须要有的)clear:both;zoom:1;(但是有的浏览器不兼容)}所以一般都是:父级{(兼容IE6/7)zoom:1;}
父级::after{content:"";display: block;height:0;clear:both;}
浮动后的会级元素的属性也发生了变化:设置浮动之后,块级元素的宽度不再跟随父级宽度,而是内容决定(内容撑开宽度)
浮动后的会级元素的属性也发生了变化:可以设置尺寸以及盒模型。