首页 > 其他分享 >清除浮动之双伪元素

清除浮动之双伪元素

时间:2023-04-10 18:32:57浏览次数:43  
标签:浮动 width clearfix 清除 双伪 height color background 200px

<!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>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .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>

标签:浮动,width,clearfix,清除,双伪,height,color,background,200px
From: https://blog.51cto.com/u_15987796/6181356

相关文章

  • css浮动问题
    引出问题这是一个正常的排版代码如下<style>.father{width:200px;border:1pxsolidred;}.son{width:100px;height:100px;background-color:blue;}</st......
  • Android系统搜索对话框(浮动搜索框)的使用
    当您需要在您的应用程序中提供搜索服务时,您第一个想到的是您的搜索框要放哪呢?通过使用Android的搜索框架,应用程序将显示一个自定义搜索对话框来处理用户的搜索请求。通过一个简单的搜索按钮或从您的应用程序中调用API,搜索对话框就会显示在屏幕的顶部,并会自动显......
  • android 拖拽图片&拖动浮动按钮到处跑
    来自老外:importandroid.app.Activity;importandroid.content.Context;importandroid.graphics.Canvas;importandroid.os.Bundle;importandroid.view.MotionEvent;importandroid.widget.AbsoluteLayout;importandroid.widget.Button;public......
  • ScrollView中浮动条的实现
    简单的浮窗http://www.open-open.com/lib/view/open1467185415741.htmlScrollView中如果内容比较长,往下拉的时候有一部分(通常是菜单)View就一直固定在屏幕顶端,像个浮动条一样,该效果Web页面使用比较多。实现这种效果需要重写ScrollView的onScrollChanged()......
  • 清除浮动(二)
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compati......
  • html页面图片浮动置顶
    创建一个图片<divclass="fixed-bottom-right"style="display:flex;position:fixed;top:80%;right:0;width:100px;height:100px;z-index:999;transform:translate(-50%,-50%);"> <imgsrc="static\picture\about.jpg&q......
  • 浮动列表项
    浮动列表项在上面的例子中链接有不同的宽度。对于所有的链接宽度相等,浮动<li>元素,并指定为<a>元素的宽度:实例li{float:left;}a{display:block;width:60px;}实例解析:float:left-使用浮动块元素的幻灯片彼此相邻display:block-显示块元素的链接,让整体变为......
  • 第八篇 css - 布局 - 【 浮动布局 + 定位布局 + flex 伸缩盒布局 + grid 网格布局 】
    普通流文档流流式布局分为1、普通流2、定位流3、浮动流不同流内的块级元素和行内元素的布局方式不同布局方式用FC格式化上下文来命名......
  • 如何清除所有的广告?
    如何清除所有的广告?加入博客后台的`页面定制CSS代码`里即可/*其它广告*/#ad_t2{ display:none}#post{ disp......
  • 利用自身的浮动布局
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>浮动</title><style>*{padding:0;margin:0;......