CSS_浮动
浮动的现象:
0.文字环绕。
1.脱离了标准标准文档流。
2.浮动元素互相贴靠。
3.浮动元素有收缩现象。
float: left; /*左浮动*/ float: right; /*右浮动*/
清除浮动:
1.给父元素设置固定高度
缺点:使用不灵活 后期不易维护
应用:网页中盒子固定高度区域,比如固定的导航栏
2.内墙法(了解)
规则:在最后一个浮动元素的后面加一个空的块级元素,并且设置clear:blth;
缺点:结构冗余。
3.伪元素(选择器)清除
给父元素添加一个叫clearfix的公共类名,
.clearfix::after{ content: ''; /*设置内容为空*/ display: block; /*转换为块级元素*/ clear: both; /*清除浮动*/ }
4.overflow:hidden;
overflow: visible; /*超出部分显示(默认)*/ overflow: hidden; /*超出部分隐藏*/ overflow: scroll; /*超出部分滚动*/ overflow: auto; /*自动*/ overflow: inherit; /*继承父级*/
清除浮动:
给父元素加上:overflow: hidden;