3.7 float · 前端学习笔记

## 1.float原理就是元素相对于整个页面漂浮起来了,上面元素float,下面元素补位 ![](https://box.kancloud.cn/863b61306f960a77bd6c754b9d40ada5_559x552.png) ## 2.无序列表浮动为了让让元素并排显示使用float ![](https://box.kancloud.cn/4d58f73b1bb33a97e9bc23852b75e832_252x335.png) ![](https://box.kancloud.cn/273e79a83cabb9b086e1999e19148192_303x43.png) ## 3.float带来的问题如果不给父元素设置高度，子元素float，会使父元素高度坍塌 ``` <style> .parent{ width:100px; } .child{ width:50px; height:50px; float:left; } </style> <body> <div class="parent"> <div class="child"></div> </div> </body> ``` **解决方案** 方法一： ``` .parent{ overflow:hidden; } ``` 方法二： ``` .parent::after{ content:''; display:black; clear:both; } ```