爱站程序员基地清除浮动 有三种方法
1 给父盒子写死高度
2 用clear: botn ==> 在这只简单说这个属性怎么用
3 overflow: hidden
在这里插入代码片
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title></head><style>.father {width: 500px;/* height: 500px; */border: 1px solid #000;background-color: pink;}.son {width: 100px;height: 100px;background-color: lime;float: left;}.clear {/* 看div最后一个 */clear: both;}</style><body><div class=\"father\"><div class=\"son\">1</div><div class=\"son\">2</div><div class=\"son\">3</div><!-- 需要浮动元素最后面 手动添加一个块级元素 设置clear:both--><div class=\"clear\"></div></div></body></html>
上面直接简单介绍一下 下面说一下流行的方法 利用 伪类 清除
::after // 当前标签内容后面添加一个标签并且选中了这个虚拟标签
::before // 当前标签前面
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title></head><style>.father {width: 500px;/* height: 500px; */border: 1px solid #000;background-color: pink;}.son {width: 100px;height: 100px;background-color: lime;float: left;}/* 主流清除浮动的方法 */.clear::after { /* 伪元素默认是行内样式 *//* content这个属性不能shao, 即使什么也不写 */content:\'\';/* 清除浮动 */clear: both;/* 因为清除浮动是要一个块级元素 , 所以讲这个伪类元素变为块级元素 */display: block;height: 0;visibility: hidden;}.clear {*zoom: 1; /*兼容ie: 67;*/}</style><body><div class=\"father clear\"><div class=\"son\">1</div><div class=\"son\">2</div><div class=\"son\">3</div></div></body></html>
