刚写代码的时候，突然有个问题，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>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
262
收藏
