console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
padding: 10px;
width: calc(100vw - 46px);
height: fit-content;
border: 1px solid black;
}
.left-block, .right-block {
width: 80px;
height: 80px;
margin-bottom: 10px;
}
.left-block {
background-color: steelblue;
color: white;
float: left;
margin-right:10px;
}
.right-block {
background-color: steelblue;
color: white;
float: right;
margin-left: 10px;
}
h4 {
margin: 5px 0;
}
.clear-fix {
clear: both;
margin: 10px 0 0 0;
}
.clear-left {
display: block;
clear: left;
}
.clear-right {
display: block;
clear: right;
}
</style>
</head>
<body>
<p>float 效果</p>
<div class="content">
<h4>float left</h4>
<div class="left-block"> left-1 </div>
<div class="left-block" style="opacity:0.8; margin-left:10px"> left-2 </div>
As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
<div class='clear-fix'> </div>
<h4>float right</h4>
<span class="right-block"></span>
As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
</div>
<p>清除浮动效果</p>
<div class="content">
<h4>float left</h4>
<div class="left-block"> left-1 </div>
<div class="clear-fix"></div>
<div class="right-block" style="opacity:0.8; margin-left:10px"> righ-2 </div>
<span class="clear-left" style="margin: 10px 0;">As much mud in the streets as if the waters had but newly
retired from the face of the earth, and it would not be
wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.</span>
<div class='clear-fix'> </div>
</div>
<p>元素塌陷</p>
<div class="content">
<h4>float left</h4>
<div class="left-block"> left-1 </div>
<div class="left-block" style="opacity:0.8;"> left-2 </div>
</div>
<br/><br/><br/>
<p>元素塌陷-解法1 clear fix</p>
<div class="content">
<h4>float left</h4>
<div class="left-block"> left-1 </div>
<div class="left-block" style="opacity:0.8;"> left-2 </div>
<div class="clear-fix"></div>
</div>
<p>元素塌陷-解法2 overflow</p>
<div class="content" style="overflow: hidden">
<h4>float left</h4>
<div class="left-block"> left-1 </div>
<div class="left-block" style="opacity:0.8;"> left-2 </div>
<div class="clear-fix"></div>
</div>
</body>
</html>