清除float浮动

九阈

已于 2022-03-29 21:44:04 修改

阅读量59

点赞数

分类专栏： # CSS 文章标签： css linux c语言

于 2021-08-13 16:22:26 首次发布

本文链接：https://blog.csdn.net/weixin_46048542/article/details/119678100

版权

CSS 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

清除float浮动
clear：指定不允许元素周围有浮动元素。

left
right
both
none
inherit

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{width: 100px;height: 100px;background-color: red;float: left;}
        #box2{width: 200px;height: 200px;background-color: blue;/* clear: left */clear: both;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

在这里插入图片描述
使用clear

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1,.box2{
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background-color: yellow;
        }
        .box2{
            background-color: blue;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            clear: left;
        }
    </style>
</head>
<body>
    <div>
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box"></div>
</body>
</html>

请添加图片描述
也可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1,.box2{
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background-color: yellow;
        }
        .box2{
            background-color: blue;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <div class="box1"></div>
        <div class="box2"></div>
         <div style="clear: both;"></div>
    </div>
    <div class="box"></div>
</body>
</html>

常用：after伪类
clear属性只能操作块标签，对内联标签不起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{width: 200px;border: 1px black solid;}
        #box2{width: 100px;height: 200px;background-color: red; float: left;}
         .clear::after{content: '';clear: both;display: block;} /* 清除浮动 */
    </style>
</head>
<body>
    <div id="box1" class="clear">
        <div id="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述
其他方法（不推荐）
固定宽高
父元素浮动(会影响后面的元素）
overflow:hidden（子元素溢出，受到影响）
overflow:hidden（子元素溢出，受到影响）实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1,.box2{
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background-color: yellow;
        }
        .box2{
            background-color: blue;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .container {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box"></div>
</body>
</html>

请添加图片描述

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        img{display: block;}
        a{text-decoration: none;color: chocolate;}
        h1,h2,h3{font-size: 16px;}
        .l{float: left;}
        .r{float: right;}
        .clear{content: "";display: block;clear: both;}
        #main{width: 366px;margin: auto 20px;}
        #main.title{height: 23px;line-height: 23px;font-size: 12px;font-weight: bold;padding-left: 30px;/* background: url();repeat-x; */}
        #main ul{overflow: hidden;margin-top: 13px;}
        #main li{margin-bottom: 22px;}
        #main .pic{width: 99px;border: 1px solid greenyellow;}
        #main .pic img{margin: 2px;}
        #main .content{width: 240px;margin-left: 13px;}
        #main .content h2{font-size: 12px;line-height: 24px;}
        #main .content p{font-size: 12px;line-height: 20px;}
    </style>
</head>
<body>
    <div id="main">
        <h2 class="title">金晨</h2>
        <ul>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="https://ps.ssl.qhimg.com/sdmt/120_186_100/t012df863969a6890e1.webp" width="50px"> 
                    </a>
                </div>
                <div class="l content">
                    <h2>金晨与神秘男子同返公寓</h2>
                    <p>
                        2月25日，有媒体曝光了一段金晨和一名年轻帅气小伙子共进晚餐后，同返公寓的画面，一时间也受到了网友们的广泛关注。当天的金晨和李斯丹妮一同现身北京机场，两人一黑一白的造型也特别...
                        <a href="#">详细</a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

九阈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除float浮动

清除float浮动clear：指定不允许元素周围有浮动元素。leftrightbothnoneinherit<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
复制链接

扫一扫