1)原理
元素浮动后排除到普通文档流之外
元素浮动后在页面中不占据位置(原位置不保留)
浮动元素碰到父元素的边框或者浮动元素的边框就会停止
浮动不会层叠
浮动只有左右,没有上下
浮动后所有元素转换为块级元素
元素浮动后,后面的文字不会被覆盖
2)语法
float:left/right/none
浮动让块级元素水平排列
3)清除浮动的影响
子元素浮动后在页面中不占据位置,如果父元素不设置高度,父元素的高度会坍塌,会对后面元素产生影响
清除浮动的方法:
1.给浮动元素的父元素加高(高度已知)
2.给浮动元素的父元素加overflow:hidden/auto (自动找高,但子元素溢出父元素会直接隐藏掉)
3.给受影响的元素加clear:left/right/both;(浮动元素的父元素高度没有找到)
4.空div法(页面中会增加空的div,浮动元素的父元素高度可以找到)
在浮动元素后加一个空的div
空div{clear:both;}
5.伪对象法
浮动元素的父元素::after{
contect:"";
display:block;
clear:both;
}