css浮动相关

最新推荐文章于 2024-10-29 22:55:09 发布

zhaokei

最新推荐文章于 2024-10-29 22:55:09 发布

阅读量221

点赞数

分类专栏：面试 CSS

本文链接：https://blog.youkuaiyun.com/zhaokei/article/details/90647160

版权

面试同时被 2 个专栏收录

2 篇文章

订阅专栏

CSS

1 篇文章

订阅专栏

为何要消除浮动？工作代码中浮动都是自己去加的，为何要消除？不解。但是面试会经常问道，所以有备无患

1.什么是浮动 https://blog.youkuaiyun.com/u013356907/article/details/82777148

2.如何消除浮动 https://blog.youkuaiyun.com/u013356907/article/details/82778480

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>消除浮动</title>
    <link rel="stylesheet" href="">
    <style>
        #container {
            border: 2px solid red;
            margin: 30px auto;
            width: 90%;
        }

        /* 消除浮动 */
        .clearfix {
            zoom: 1;
        }

        .clearfix:after {
            content: "";
            display: block;
            clear: both;
            visibility: hidden;
            height: 0
        }
        /* /消出浮动 */
        
        .float1,
        .float2,
        .float3 {
            height: 100px;
            background: green;
            width: 200px;
            float: left;
        }

        .float2 {
            background-color: #0087D1;
        }

        .float3 {
            background-color: blue;
            float: right;
        }
    </style>
</head>

<body>
    <div id="container" class="clearfix">
        <div class="float1">
            <h2>float left</h2>
        </div>
        <div class="float2">
            <h2>float left</h2>
        </div>
        <div class="float3">
            <h2>float right</h2>
        </div>
    </div>
</body>

</html>

3.其他消除浮动的方法

父元素定义height，或者overflow:hidden;