清除浮动方法的总结

标签:#清除浮动# 时间:2018/10/11 15:23:25 作者:Shino

一 给盒子加高度
  浮动的元素 只能被有高度的盒子关注。也就是说,如果盒子内部有浮动,而这个盒子有高度。那么盒子之间的浮动不会互相影响。但是,工作上我们一般不会给所有的盒子加高度,因为麻烦也难以变化所以一般不使用这种方法。

二 clear:both;
  最简单的清除浮动的方法,就是给盒子增加 clear:both 属性。表示自己内部元素不受其他盒子影响。但是虽然浮动确实被清除了,然而margin也会失效。

三 隔墙法 
  在两部分浮动元素之间,建立一个墙,隔开两部分浮动。用自身当空隙。
然而此方法第一个div还是没有高度。
 内墙法:
 我们把一个盒子里面结尾加上一个墙,来分割两部分浮动。这样做还有个优点就是不仅仅能分割浮动,而且还能吧第一个盒子撑出高度。这样这个盒子的背景,边框就能狗根据p的高度来撑开了。

四 overflow:hidden;
  这个属性的本意,是将所有溢出盒子的内容隐藏掉。但是,这个属性同样也能用于浮动的清除。 一个盒子无法被内部浮动的标签撑出高度。但是,如果盒子加上了overflow:hidden;属性。那么这个盒子就能被浮动的标签撑出高度了。并且 overflow:hidden;能够让margin生效。
欢迎大家关注DataLearner官方微信,接受最新的AI技术推送