题解 | 浮动和清除浮动
浮动和清除浮动
https://www.nowcoder.com/practice/88bcbaee954349f5a8810bfa94ee61a8
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.wrap::after {
/*补全代码*/
content:'';
display:block;
clear:both;
}
.left {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
}
.right {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='left'></div>
<div class='right'></div>
</div>
<script type="text/javascript">
/* 填写JavaScript */
</script>
</body>
</html>
- 浮动
element {
float: left | right | none;
}
::after 来清除浮动。
.clearfix::after {
content: "";
display: block;
clear: both;
}
- 使用
overflow属性 ：为父容器设置overflow属性为auto或hidden，可以自动清除浮动。
.container {
overflow: auto;
}
- 使用
display: flow-root：这是 CSS 的一种新特性，可以将父容器的显示类型设置为flow-root，从而自动清除浮动。
.container {
display: flow-root;
}
本地你俩不是乱杀
