Floating elements deviate from the standard flow, which will affect the layout of the page and affect the following elements, but does not affect the previous elements.
Clear float:
- Add height to the parent element, then the parent element will take up space and is a standard flow, and the floating element will not affect the elements below.
- Setting the overflow: hidden; attribute to the parent element will generate an independent block context for this block-level element, just like in the window global scope, declaring a function will generate an independent scope, making this The internal layout of the block elements is completely independent and isolated. (Involving BFC)
- Inside the parent element, add a box named clear at the end and set the style clear: both;
- Use pure css method to solve, add display: black; clear: both; to the pseudo element of the parent element after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
border: 1px solid black;
/* 父元素添加overflow: hidden;可以清除浮动 */
/* overflow: hidden; */
/* 添加高度也可以清除浮动 */
/* height: 200px; */
}
/* .clear {
clear: both;
} */
/* 使用纯css方法来解决浮动后父元素的高度问题 */
.parent::after {
content: '';
display: block;
clear: both;
}
.child {
width: 200px;
height: 200px;
float: left;
}
.box1 {
background-color: orangered;
}
.box2 {
background-color: orchid;
}
.box3 {
background-color: palegreen;
}
.boxa {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child box1"></div>
<div class="child box2"></div>
<div class="child box3"></div>
<!-- <div class="clear"></div> -->
</div>
<div class="boxa"></div>
</body>
</html>