刚写代码的时候，突然有个问题，float加在父级元素上和加在子级元素上有什么区别，还有浮动清除的一些问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main{
width: 1000px;
background-color: bisque;
overflow: hidden;
}
.fl{
float: left;
}
.wh200{
width: 200px;
height: 200px;
margin-left: 20px;
background-color: aqua;
}
.clear{
clear: both;
}
.main2{
width: 1000px;
background-color: blue;
height: 400px;
}
</style>
</head>
<body>
<div class="main">
<div class="fl wh200"></div>
<div class="fl wh200"></div>
<div class="fl wh200"></div>
</div>
<div class="main2"></div>
</body>
</html>
清楚浮动两种方式
1. 父级加 overflow: hidden;
2. 最后一个子级加clear:both
这里的浮动是加在子级元素上的，并且通过 overflow: hidden清楚浮动；如果不加浮动清除，那么main1这个父级div是没有高度的，这会导致main2这个div浮上来，如下效果
还有不存在什么父级元素加了浮动，子级元素也浮动，float:left这个属性加给谁，谁就参与浮动。
总结：
套路框架：第一层：页面整体框架overflow:hidden清除浮动；第二层：就是第一层里面的一些元素，比如header里面的logo,search这些，定义高度就行。
<div style="width: 1000px;overflow: hidden">
<div style="float: left;width: 330px">
<div style="width: 200px;height: 50px"></div>
<div style="width: 130px;height: 50px;"></div>
</div>
<div style="float: left;width: 330px"></div>
<div style="float: left;width: 330px"></div>
</div>
<div style="width: 1000px;overflow: hidden">
<div style="float: left;width: 330px"></div>
<div style="float: left;width: 330px"></div>
<div style="float: left;width: 330px"></div>
</div>
时间： 2024-10-12 16:40:36