清除浮动方法的总结
一 给盒子加高度
浮动的元素 只能被有高度的盒子关注。也就是说,如果盒子内部有浮动,而这个盒子有高度。那么盒子之间的浮动不会互相影响。但是,工作上我们一般不会给所有的盒子加高度,因为麻烦也难以变化所以一般不使用这种方法。
二 clear:both;
最简单的清除浮动的方法,就是给盒子增加 clear:both 属性。表示自己内部元素不受其他盒子影响。但是虽然浮动确实被清除了,然而margin也会失效。
三 隔墙法
在两部分浮动元素之间,建立一个墙,隔开两部分浮动。用自身当空隙。
然而此方法第一个div还是没有高度。
内墙法:
我们把一个盒子里面结尾加上一个墙,来分割两部分浮动。这样做还有个优点就是不仅仅能分割浮动,而且还能吧第一个盒子撑出高度。这样这个盒子的背景,边框就能狗根据p的高度来撑开了。
四 overflow:hidden;
这个属性的本意,是将所有溢出盒子的内容隐藏掉。但是,这个属性同样也能用于浮动的清除。 一个盒子无法被内部浮动的标签撑出高度。但是,如果盒子加上了overflow:hidden;属性。那么这个盒子就能被浮动的标签撑出高度了。并且 overflow:hidden;能够让margin生效。
欢迎大家关注DataLearner官方微信,接受最新的AI技术推送
