浮动
应用场景
- 文字环绕
- 横向排列
浮动的基本特点
修改float属性为:
- left: 左浮动, 元素靠上靠左排列;
float:left
- right: 右浮动, 元素靠上靠右排列;
float:right
- 默认值为none
- 当一个元素浮动后, 元素必定为块盒(更改display属性block)
- 浮动元素的包含块. 和常规流元素一样, 为父元素的内容盒
盒子尺寸
- 宽度为auto时, 表示适应内容宽度(没有内容宽度为0)
- 高度为auto时, 与常规流一样,适应内容高度
- margin为auto, 值为0
- border, padding, 百分比设置与常规流一样
盒子排列
-
左浮动的盒子靠上靠左排列
-
右浮动的盒子靠上靠右排列
-
浮动盒子在包含块中排列时,会避开常规流块盒
-
常规流块盒在排列时, 会无视浮动盒子
-
行盒在排列时,会避开浮动盒子
-
外边距合并并不会发生
如果文字没有在盒子中,浏览器会自动生成一个行盒,该行盒叫做匿名行盒. 文字一定是行盒
高度坍塌!!!
高度坍塌的根源: 常规流盒子的自动高度, 在计算时, 不会考虑浮动盒子
清除盒子, 涉及css属性: clear
- 默认值: none
- left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
- right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方
- both:清除左右浮动,该元素必须出现在前面所有浮动盒子的下方
在坍塌的元素后面加上类clearfix
.clearfix::after{
content:'';
display:block;
clear:both;
}
所以,在使用浮动后,一定要在父元素中添加清除浮动的类,防止高度坍塌!!!