语法: float:none/left/right;
浮动的目的:就是让竖着的元素横着显示
个元素设置float: left/right;时，元素会脱离文档流 (半脱离) ，不占空间:
有三个取值:
left:元素向左浮动
right:元素向右浮动
none:默认值，不浮动
clear:使当前元素不受上边浮动元素的影响,
清除浮动的属性是clear，语法
clear : none left right both
none: 默认值。允许两边都可以有浮动对象
left:当前元素不受上一个左浮动元素的影响
right:当前元素不受上一个右浮动元素的影响
both:当前元素不受上一个左右浮动元素的影响
浮动造成的副作用?
浮动会造成父元素高度塌陷
解决办法:
1.给父元素设置固定高度 优点:简单易懂 缺点:固定高度不灵活,不易于维护
2.清楚浮动造成的影响
属性名: clear
属性值: left right none不清除 both 左右浮动都清除
给被影响的元素添加clear:both
优点:代码少
缺点:无法解决高度塌陷问题
(治本不治标)
3.在浮动元素的最后位置添加一个空标签,给改标签添加clear:both
优点:完全符合语义
缺点:生成无意义的代码,代码量多
4.给浮动元素的父元素添加伪元素选择器清楚浮动
::after{
content:"";
display:block;
clear: both;
}
万能清除浮动
市面上清除浮动方法
缺点:较难理解
5.给浮动元素的父元素添加浮动
优点:代码量少
缺点:这是一种将错就错的办法,严重影响后续元素的布局
6.给父元素添加overflow:hidden (触发BFC特性)
优点:简单易懂方便
缺点:该属性有自身的使用方法
