前端学习（310）：清除浮动的方法

最新推荐文章于 2024-08-06 17:51:31 发布

前端小歌谣

最新推荐文章于 2024-08-06 17:51:31 发布

阅读量256

点赞数

分类专栏： # 歌谣--前端学习--总进程

本文链接：https://blog.csdn.net/weixin_43392489/article/details/103824731

版权

本文介绍了前端开发中解决高度塌陷问题的四种清除浮动方法：1. 给父元素设定固定高度，但会导致高度无法自适应；2. 使用`overflow:hidden`，可能导致内容被隐藏；3. 在浮动元素后面添加空div以清除浮动，但会增加代码冗余；4. 利用CSS伪元素`:after`实现万能清除浮动，保持代码简洁并允许高度自适应。

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

我们经常把高度塌陷问题也叫做常见的几种清除浮动的方法

高度塌陷问题—父元素高度自适应，子元素float后，造成父元素高度为0，就叫做高度塌陷问题

给父元素一个高度

缺点：无法高度自适应

父元素{overflow:hidden;}

缺点：父元素框之外的部分会被隐藏

在浮动的子元素的末尾，添加一个空div，并设置如下样式

div{clear:both; height:0;overflow:hidden;} 缺点：容易造成代码冗余

万能清除浮动法

父元素:after{content:””;display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动的方法</title>
    <style>
    *{margin: 0;padding: 0;}
    /* 方法一给父元素加一个高度 */
    /* .box{width: 600px;padding