浮动
浮动用于实现并排
float:left; 向左边贴靠
注意事项:
- 如果要使用浮动,并排的盒子都需要设置浮动
- 父盒子宽度需要足够,否则会“下坠”
- 子盒子按顺序进行贴靠
- 设置浮动的元素脱离了块级元素、行内元素等的限制,脱离了标准的文档流,无论如何都可以设置宽度和高度
- 垂直的盒子不要使用浮动,需要并排的场合才要使用它
- 大盒子内部的小盒子又可以继续使用浮动,浮动可以嵌套
BFC规范
BFC(Box Formatting Context,块级格式化上下文)
容器内外元素间互不影响
创建方法:
- 设置浮动
- 设置定位(局部或固定)
- display:inline-block、flex、inline-flex
- overflow:hidden(溢出隐藏:溢出盒子边框的内容被隐藏,padding部分的溢出还在)
没啥实际意义的BFC作用(?):
BFC可以取消盒子的margin塌陷(垂直方向margin不叠加的现象)
BFC可以阻止元素被浮动元素覆盖
内部有浮动的盒子要设置height属性
清除浮动
浮动一定要封闭到一个盒子中,否则会对页面的后续元素产生影响
方法:
- 形成BFC(推荐overflow)
- 给后续的父盒子设置clear:both(清除左右浮动对自己的影响)margin可能会失效
- 使用::after伪元素,同时使用clear:both margin不失效
- 两个盒子间隔一个带有clear:both的盒子