直到写这篇随笔,才认真的去研究了一下每一种清除浮动的方法到底是什么原理(⊙﹏⊙)b 对于刚刚接触CSS的人来说,就像当时的我一样,在做一些小项目和练习的时候,总会莫名其妙的问自己“哎!?我的div去哪了!?( ⊙ o ⊙ )”然后默默地加上一个背景色来看一下我辛辛苦苦写的小 ...
直到写这篇随笔,才认真的去研究了一下每一种清除浮动的方法到底是什么原理(⊙﹏⊙)b
对于刚刚接触CSS的人来说,就像当时的我一样,在做一些小项目和练习的时候,总会莫名其妙的问自己“哎!?我的div去哪了!?( ⊙ o ⊙ )”然后默默地加上一个背景色来看一下我辛辛苦苦写的小块块去了哪里。
原来是因为没有清除浮动被上面的遮住了_(:зゝ∠)_
总是忘记清除浮动,是我最致命的问题,所以总结一下方法,顺便让自己的手和脑子,别再忘记清除这些讨厌的浮动/(ㄒoㄒ)/~~
当给我们的小div加上浮动,让他们整整齐齐的排列起来的时候,他的父级box没有被内容撑起来,因为我们知道浮动会脱离文档流,让浮动的元素进入浮动层。
当我们再写其他内容的时候就会被遮住,比如这块灰色的div~
那到底该怎么清除浮动呢......
方法一:给父级一个高度
这种方法是最简单的方法,也最好理解,他的原理就是给父级一个高度,让下面的元素知道,上面的三个元素,有父亲给他们撑起了一片天。
方法二:添加新的元素,运用clear:both
这种方法就是给他们添加一个兄弟元素,给他的兄弟元素一个clear:both属性,clear的属性就是属性规定的元素不允许出现浮动。
both表示两边都不允许出现浮动,clear的属性也可以为left(在左侧不允许浮动元素)和right(在右侧不允许浮动元素),默认值为none(允许浮动元素出现在两侧)。
方法三:给父级overflow
给父级增加overflow属性,就可以清除浮动,overflow:hidden和overflow:auto
但是我一直搞不懂为什么overflow为什么可以清除浮动,因此特意去查了资料:
overflow:hidden的意思是超出的部分要裁切隐藏掉,那么如果浮动的元素不占普通流位置,普通流的包含块要根据内容高度裁切隐藏,那么不计算其内浮动元素高度就裁切,就有可能会裁掉浮动的内容。
如果没有明确设定容器高情况下,它要计算内容全部高度才能确定在什么位置裁剪,浮动的高度就要被计算进去,顺带达成了清理浮动的目标。
原标题:关于清除浮动的几种方法
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。