float浮动
CSS 中的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列,往往是用于图像,但它在布局时一样非常有用。
但是在布局是会出现一些影响如下图:
未使用float浮动
使用float浮动
这里可以发现一个问题,使用float浮动后子元素虽然实现了水平方向的浮动,但是父元素的高度却塌陷了。
解决方法
一、在父元素的样式中加入overflow:hidden属性。目的是父元素包住这个脱离了文档流的浮动元素。
"overflow:hidden"可以溢出隐藏,即当内容元素的高度大于其包含块的高度时,设置该属性即可把内容区域超出来的部分隐藏,使内容区域完全包含在该包含块中。
"overflow:hidden"还有另外一个特殊的用途清除包含块内子元素的浮动。这里涉及到BFC布局规则。详情请见BFC规则及应用场景
二、采用用flex弹性布局
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。(Flex 布局会成为开发者首选布局。)