float:定义元素在哪个方向浮动
属性值:
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
说明:
以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动。
浮动元素会生成一个块级框,而不论它本身是何种元素类型。
浮动会让元素变成块状元素。
分类
双标签 单标签:根据有无单独结束标签进行分类
元素类型
块状元素 行内元素:根据标签在浏览器中显示的特征
块状元素:div p h3 ol li ul dl dt dd
A:自占一行
B:可以设置宽度和高度
C:在没有设置宽度的情况下,宽度与父元素同宽
行内元素:em i b strong a sup sub span del
A: 可以和其他行内元素在一行内并列显示
B:不可以设置宽度和高度,大小根据内容多少而定
高度塌陷和浮动清除方法
当子元素有浮动并且父元素没有高度的情况下父元素高度为0,会称为高度塌陷
解决方法:
(1)给父元素添加声明overflow:hidden;(触发一个BFC)
(2)在浮动元素下方添加空div,并给该元素添加声明
div{clear:both; height:0; overflow:hidden;}
(3)万能清除浮动法
选择符:after{
content:"";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
clear: 属性规定元素的哪一侧不允许其他浮动元素。
属性值:
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。