CSS清除因为浮动布局导致父元素height值为0的三种方法

#麻辣小龙虾#

已于 2023-04-18 10:11:50 修改

阅读量1.8k

点赞数

分类专栏： web前端 CSS CSS3 文章标签： css html 布局

于 2017-07-26 22:59:46 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/76167387

版权

web前端同时被 3 个专栏收录

99 篇文章 1 订阅

订阅专栏

CSS3

20 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

在使用css布局页面的时候往往会使用float布局元素，这时有可能会出现因为浮动，父元素出现高度为0的情况，如图所示
这里写图片描述
这时会根据项目需要对浮动的元素进行清除，以避免父元素出现为高度0的情况。常见的方法如下：

第一种、<div class="clearboth"></div>
这里写图片描述

在子元素里面多加一个div（或者其他带有clear:both样式的元素）

<!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>Document</title>
    <style>
		#od>div{float:left;height:100px;width:100px;margin:0 10px;background:#ccc;}
		
		.clearboth{clear:both;height:0;}
    </style>
</head>
<body>
    <div class="ob" id="od">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="clearboth"></div>
    </div>
</body>
</html>

第二种、伪类::after清除方法

<!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>Document</title>
    <style>
		#od>div{float:left;height:100px;width:100px;margin:0 10px;background:#ccc;}
		
		#od::after{content:"";display:block;clear:both;}
		
    </style>
</head>
<body>
    <div class="ob" id="od">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
    </div>
</body>
</html>

第三种、使用overflow属性进行清除

<!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>Document</title>
    <style>
		#od>div{float:left;height:100px;width:100px;margin:0 10px;background:#ccc;}
		#od{overflow:auto;}/***设置hidden也可以**/
    </style>
</head>
<body>
    <div class="ob" id="od">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		
    </div>
</body>
</html>

第一种则会在项目中多加了一个无用的dom元素，一般情况出现的少，第二种使用css伪类在一些比较低版本的浏览器中可能会出现兼容性问题，第三种使用overflow属性也有存在的弊端，比如如果如长度超出了会出现隐藏等现象，所以一般在项目中使用第二种居多，可以兼容大部分用户浏览器。

#麻辣小龙虾#

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS清除因为浮动布局导致父元素height值为0的三种方法

在使用css布局页面的时候往往会使用float布局元素，这时有可能会出现因为浮动，父元素出现高度为0的情况，如图所示这时会根据项目需要对浮动的元素进行清除，以避免父元素出现为高度0的情况。常见的方法如下：第一种、在子元素里面多加一个div（或者其他带有clear:both样式的元素）
复制链接

扫一扫