清除浮动-双伪元素清除浮动（HTML、CSS）

谁践踏了优雅 2023-10-03 13:24 7阅读 0赞

### 清除浮动-双伪元素清除浮动（HTML、CSS） ###

<!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>清除浮动-双伪元素清除浮动</title>
        <style>
            .clear::before,
            .clearfix:after {
        
                content: "";
                display: block;
    
            }
    
            .clearfix:after {
        
                clear: both;
            }
    
            .clearfix {
        
                *zoom: 1;
            }
    
            .box {
        
                width: 800px;
                border: 1px solid blue;
                margin: 0 auto;
            }
    
            .damao {
        
                float: left;
                width: 300px;
                height: 200px;
                background-color: purple;
            }
    
            .ermao {
        
                float: left;
                width: 200px;
                height: 200px;
                background-color: pink;
            }
    
            .footer {
        
                height: 200px;
                background-color: black;
            }
        </style>
    </head>
    
    <body>
        <div class="box clearfix">
            <div class="damao">大毛</div>
            <div class="ermao">二毛</div>
        </div>
    
        <div class="footer"></div>
    
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关清除浮动-双伪元素清除浮动（HTML、CSS）

清除浮动-双伪元素清除浮动（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

谁践踏了优雅/ 2023年10月03日 13:24/ 0 赞/ 8 阅读

相关清除浮动

清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的情况。清除浮动的方法有很多种，这里我只写被大家推荐切常用的方法。 1、父级添加伪类 // htm

柔光的暖阳◎/ 2023年08月17日 17:39/ 0 赞/ 140 阅读

相关 float元素产生浮动流清除浮动

浮动元素产生了浮动流所有产生了浮动流的元素，块级元素看不到他们，产生了BFC的元素和文本类属性的（inline）的元素以及文本都能看得到浮动元素，这样就导致一个问题，一

冷不防/ 2022年11月27日 15:53/ 0 赞/ 231 阅读

相关 HTML伪元素、用伪元素清除浮动流

1. 伪元素：可以当做html标签用css样式来操作，但是没有html结构（1）任何一个元素都有伪元素，可以当做正常元素来使用。（2）::before ：在标签的逻辑之

àì夳堔傛蜴生んèń/ 2022年05月13日 09:04/ 0 赞/ 266 阅读

相关伪类清除浮动

之前写的项目有个base.css，后来找不到了，记录一下 /清除浮动代码/ .clearfloat:after { display: block

古城微笑少年丶/ 2022年01月26日 15:39/ 0 赞/ 333 阅读

相关 CSS 清除浮动伪类

参考链接：https://www.cnblogs.com/yingsu/p/7261904.html 不清楚浮动的结果和影响不再描述，清除浮动的代码别处也有很多，每种方法都有

痛定思痛。/ 2022年01月09日 05:27/ 0 赞/ 211 阅读

相关 CSS 清除浮动伪类

参考链接：https://www.cnblogs.com/yingsu/p/7261904.html 不清楚浮动的结果和影响不再描述，清除浮动的代码别处也有很多，每种方法都有

冷不防/ 2021年12月23日 10:47/ 0 赞/ 230 阅读

相关浮动+清除浮动

界面布局 1.企业开发中什么时候使用标准流什么时候使用浮动流？垂直方向使用标准流，水平方向使用浮动流。 2.拿到一个很复杂的界面如何入手？从上至下布局、从

待我称王封你为后i/ 2021年10月30日 06:54/ 0 赞/ 557 阅读

相关父元素清除浮动

[清除浮动float (:after方法)][float _after] 1. 什么时候需要清除浮动？清除浮动有哪些方法？（1）对元素进行了浮动（float）后，该元

Myth丶恋晨/ 2021年10月09日 03:26/ 0 赞/ 462 阅读

相关清除浮动

1.给父元素加溢出处理 overflow:hide 2.定义一个空元素，添加clear属性 3.结合伪元素after

た入场券/ 2021年09月14日 08:26/ 0 赞/ 403 阅读