解决元素浮动(float)导致父元素高度为零无法新起一行的问题

最新推荐文章于 2022-08-09 20:30:09 发布

klaus08

最新推荐文章于 2022-08-09 20:30:09 发布

阅读量158

点赞数

文章标签： html css html5 css3

本文链接：https://blog.csdn.net/qq_43773164/article/details/104977206

版权

web学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

以此为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 500px;
        }
    </style>
</head>
<body>
    <div class="header" style="width: 500px;background-color: aliceblue;">
    <p class="p1" style="margin: 0; float: left;background-color: blue; width: 100px;height: 200px;"></p>
    <p class="p2" style="margin: 0; float: right;background-color: red;width: 200px;height: 100px;"></p>
</div>
</body>
</html>

效果图是这样
在这里插入图片描述
这时候要在header块下面添加文本，如果直接在header块后添加<p>爱生活</p>．则会产生下图这种尴尬情形．

要解决这种情况有很多方法．这里几下三个：

1 . 在header块中添加样式overflow:hidden;
添加overflow
2. 让父元素header也浮动起来(注意! 可能会打破已有的布局)
让header浮动
3. 父元素header中添加空元素并设置clear:both

4. 给新元素clear:both

前几种都是通过使父元素包裹住浮动元素实现的，所以得到的效果图是在这里插入图片描述
而最后一种是在新元素上设置，所以得到的是

以第三个为基，可延伸出更完美的方法（毕竟第三种方法无故新增了新元素）

.header::after{
conten: hhh;
display: block;
clear: both;
visibility: hidden;
height: 0;
}

利用伪元素使父元素包裹浮动元素，然后将伪元素隐藏起来

klaus08

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决元素浮动(float)导致父元素高度为零无法新起一行的问题

以此为例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title&g...
复制链接

扫一扫

专栏目录