float的设计初衷仅仅是：为了文字环绕效果
float的包裹与破坏
包裹：收缩、坚挺、隔绝（BFC）
破坏：父元素高度塌陷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
.box{
border: 1px solid red;
width: 300px;
margin: 20px auto;
}
.left{
float: left;
height: 100px;
width: 50px;
border: 1px solid black;
}
.right{
float: right;
height: 100px;
width: 50px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
如何降低float破坏性的影响（清除浮动）？
1、底部插入clear:both;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
.box {
border: 1px solid red;
width: 300px;
margin: 20px auto;
}
.clearfix {
clear: both;
}
.left {
float: left;
height: 100px;
width: 50px;
border: 1px solid black;
}
.right {
float: right;
height: 100px;
width: 50px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
.box {
border: 1px solid red;
width: 300px;
margin: 20px auto;
}
.box:after {
content: ‘‘;
display: block;
height: 0;
overflow: hidden;
clear: both;
}
.left {
float: left;
height: 100px;
width: 50px;
border: 1px solid black;
}
.right {
float: right;
height: 100px;
width: 50px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
.box {
border: 1px solid red;
width: 300px;
margin: 20px auto;
}
.box:after {
content: ‘‘;
display: table;
clear: both;
}
.left {
float: left;
height: 100px;
width: 50px;
border: 1px solid black;
}
.right {
float: right;
height: 100px;
width: 50px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
2、父元素BFC/haslayout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
.box {
border: 1px solid red;
width: 300px;
margin: 20px auto;
overflow: hidden;
}
.left {
float: left;
height: 100px;
width: 50px;
border: 1px solid black;
}
.right {
float: right;
height: 100px;
width: 50px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
float的特性
1、元素block块状化（砖头化）；
2、破坏性造成的紧密排列特性（去空格化）。
原文地址：https://www.cnblogs.com/fengxiongZz/p/8148673.html
时间： 2024-08-30 15:39:48