浮动：float，清除浮动的四种方法
程序员文章站
2024-01-28 18:19:10
...
浮动的特性：
- 浮动的主要作用是：让多个块级元素（display: block）在同一行显示 。
- 添加浮动的元素，脱离了标准文档流，不占位置，会影响标准流，后面的元素会向上移动，钻到浮动元素的下面。
-
浮动只有左右：float: left right none
- 添加浮动元素，进行了隐式转换变成了“行内块元素”，其实display虽然还是block /inline,但是添加了浮动的元素已经有了行内块元素的特性（inline-block）,可以设置宽和高
浮动的应用：
让多个块级元素在同行显示
<style>
.red{
border: 1px solid black; /*添加边框*/
float:left; /*添加向左的浮动*/
margin-left: -1px; /*向左移动 1 像素*/
width: 100px; /*设置宽 高*/
height: 100px;
background-color:red;/*背景颜色*/
}
.green{
width: 100px; /*设置宽 高*/
height: 100px;
float:right; /*添加向右的浮动*/
background-color: green; /*背景颜色*/
border: 1px solid black; /*添加边框*/
}
</style>
<body>
<div class="red"></div>
<div class="red"></div>
<div class="green"></div>
</body>布局：
<style>
.row1,.row2{/*第一行和第二行*/
height: 202px;
width: 404px;
margin:auto; /*水平居中*/
}
.father {/*第一行和第二行里面的 4 个大盒子*/
width: 200px;
height: 200px;
background-color:rgba(0,0, 0,0.5 );
border:1px solid black;
float: left;/*左浮动*/
}
.father div{ /*4个大盒子里面的小盒子*/
width: 100px;
height: 100px;
background-color: blueviolet;
}
.father .son1{/*(0.0)*/
float:right;/*右浮动*/
margin-top: 100px;/*上外边距100px*/
}
.father .son2{/*(0.1)*/
float:left;/*左浮动*/
margin-top: 100px;/*上外边距100px*/
}
.father .son3{/*(1.0)*/
float: right;/*右浮动*/
}
</style>
</head>
<body>
<div class="row1"> <!--第一行-->
<div class="father">
<div class="son1">（0.0）</div>
</div>
<div class="father">
<div class="son2">（0.1）</div>
</div>
</div>
<div class="row2"><!--第二行-->
<div class="father">
<div class="son3">（1.0）</div>
</div>
<div class="father">
<div class="son4">（1.2）</div>
</div>
</div>
</body>
<body>
<div class="row1"> <!--第一行-->
<div class="father">
<div class="son1"></div>
</div>
<div class="father">
<div class="son2"></div>
</div>
</div>
<div class="row2"><!--第二行-->
<div class="father">
<div class="son3"></div>
</div>
<div class="father">
<div class="son4"></div>
</div>
</div>
</body>浮动的影响：
- 添加浮动的元素，会影响其他元素，元素浮动了，不占位置，后面的元素会自动补上。
<style>
.left{
width: 100px;
height: 50px;
float: left;
background-color:slategray;
border:1px solid black;
}
.right{
width: 300px;
height: 50px;
float: left;
background-color: cadetblue;
border:1px solid black;
}
.none{
width: 450px;
height: 300px;
background-color: coral;
}
</style>
</head>
<body>
<div class="left">添加了浮动</div>
<div class="right">添加了浮动</div>
<div class="none">没有添加浮动</div>
</body>清除浮动的影响：
当我们需要使用浮动而又不想因为浮动影响后面的标准流元素时，可以用一些手段来清除浮动的影响，并不需要后面的元素向上对齐，而是想要浮动的元素，虽然浮动了，离开了，但是以前的祖屋还是希望保留。
- 方法一：可以给浮动的父级元素设置高度来占位，这样后面的元素就不会向上补齐。一定要给父级元素手动设置高度，因为父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。
.father { height: 52px; } <body> <div class="father"> <div class="left">添加了浮动</div> <div class="right">添加了浮动</div> </div> <div class="none">没有添加浮动</div> </body> - 方法二：但是有时候，我们不确定父级元素要需要给多大，可以在浮动元素的后面添加一个元素，并添加一个clear:both 的属性来清除浮动。这样不需要给父级元素设置高度，浮动的元素会自动撑开一行的高度，并且后面的元素不会占用浮动元素的祖屋。
<body> <div class="left">添加了浮动</div> <div class="right">添加了浮动</div> <div style="clear:both"></div> <div class="none">没有添加浮动</div> </body> - 利用 overflow: hidden/auto清除浮动。子元素可以撑开父级的高度
<style> .father { overflow: hidden; /*清除浮动*/ /*overflow: auto; 清除浮动*/ /* overflow: scroll; 清除浮动，但是有滚动条*/ /* overflow: visible; 不可以清除浮动*/ } .left { width: 100px; height: 50px; float: left; background-color: slategray; border: 1px solid black; } .right { width: 300px; height: 50px; float: left; background-color: cadetblue; border: 1px solid black; } .none { width: 450px; height: 300px; background-color: coral; } </style> <body> <div class="father"> <div class="left">添加了浮动</div> <div class="right">添加了浮动</div> </div> <div class="none">没有添加浮动</div> </body> - 利用伪元素清除浮动，给父级添加伪元素。
<style> .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {/*兼容低版本IE浏览器*/ *zoom: 1; } .left { width: 100px; height: 60px; float: left; background-color: slategray; border: 1px solid black; } .right { width: 300px; height: 50px; float: left; background-color: cadetblue; border: 1px solid black; } .none { width: 450px; height: 300px; background-color: coral; } </style> <body> <div class="father clearfix"> <div class="left">添加了浮动</div> <div class="right">添加了浮动</div> </div> <div class="none">没有添加浮动</div> </body> - 利用双伪元素清除浮动,给父级添加伪元素。
<style> .clearfix {/*兼容低版本的IE浏览器*/ zoom: 1 } .clearfix:after, .clearfix:before { content: " "; display: table } .clearfix:after { clear: both; visibility: hidden; } .left { width: 100px; height: 60px; float: left; background-color: slategray; border: 1px solid black; } .right { width: 300px; height: 50px; float: left; background-color: cadetblue; border: 1px solid black; } .none { width: 450px; height: 300px; background-color: coral; } </style> <body> <div class="father clearfix"> <div class="left">添加了浮动</div> <div class="right">添加了浮动</div> </div> <div class="none">没有添加浮动</div> </body>