CSS清除浮动使父级元素展开

最新推荐文章于 2024-04-26 16:40:43 发布

枫叶流丹

最新推荐文章于 2024-04-26 16:40:43 发布

阅读量1k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/ziminghuohua/article/details/73724662

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

　　一个没有设置高度的容器div内如果存在浮动元素（即使用了属性float:left或者float:right)，那么该父级元素会无法展开，下面用三种方法解决：
　　源代码为：
　　

<!DOCTYPE html>
<html>
<head>
    <title>清除子元素的浮动</title>
    <style type="text/css">
        .content{
            width: 500px;
            border: 1px solid red;
        }
        .left{
            width: 100px;
            height: 100px;
            border: 1px dashed blue;
            float: left;
        }
        .right{
            width: 100px;
            height: 100px;
            border: 1px dashed green;
            float: right;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

产生的效果：
这里写图片描述
方法一：设置父级元素的高度，但是要事先知道内容的高度，这里内部的元素高度是100像素，加上上下边框高度2像素，一共是102像素。

<!DOCTYPE html>
<html>
<head>
    <title>清除子元素的浮动</title>
    <style type="text/css">
        .content{
            width: 500px;
            border: 1px solid red;
            height: 102px;
        }
        .left{
            width: 100px;
            height: 100px;
            border: 1px dashed blue;
            float: left;
        }
        .right{
            width: 100px;
            height: 100px;
            border: 1px dashed green;
            float: right;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

效果为：
这里写图片描述
方法二：添加样式，并在父级元素结束标签前添加both:clear样式。

<!DOCTYPE html>
<html>
<head>
    <title>清除子元素的浮动</title>
    <style type="text/css">
        .content{
            width: 500px;
            border: 1px solid red;
        }
        .left{
            width: 100px;
            height: 100px;
            border: 1px dashed blue;
            float: left;
        }
        .right{
            width: 100px;
            height: 100px;
            border: 1px dashed green;
            float: right;
        }
        .cl{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
        <div class="cl"></div>
    </div>
</body>
</html>

效果为：
这里写图片描述
方法三：添加overflow属性

<!DOCTYPE html>
<html>
<head>
    <title>清除子元素的浮动</title>
    <style type="text/css">
        .content{
            width: 500px;
            border: 1px solid red;
            overflow: hidden;
        }
        .left{
            width: 100px;
            height: 100px;
            border: 1px dashed blue;
            float: left;
        }
        .right{
            width: 100px;
            height: 100px;
            border: 1px dashed green;
            float: right;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

效果为：
这里写图片描述

枫叶流丹

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS清除浮动使父级元素展开

一个没有设置高度的容器div内如果存在浮动元素（即使用了属性float:left或者float:right)，那么该父级元素会无法展开，下面用三种方法解决：　　源代码为：　　<!DOCTYPE html><html><head> <title>清除子元素的浮动</title> <style type="text/css"> .content{
复制链接

扫一扫