清除浮动的几种方法

最新推荐文章于 2024-07-25 16:45:46 发布

୧(不負眾望)૭

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量482

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/Huang_DW/article/details/108310451

版权

本文探讨了清除浮动的重要性，即解决子元素浮动导致父元素高度塌陷的问题。文章介绍了五种清除浮动的方法：1) 额外标签法；2) 父级添加overflow方法；3) 使用after伪元素清除浮动；4) 使用before和after双伪元素清除浮动；5) 给父级定义高度。每种方法的优缺点也进行了详细说明。

摘要由CSDN通过智能技术生成

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

如下:
给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子
在这里插入图片描述
当我给内部两个盒子加上float属性的时候，底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了

一、额外标签法：给谁清除浮动，就在其后额外添加一个空白标签

优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差。

给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

<div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class

关注