首页 > 其他分享 >清除浮动(二)

清除浮动(二)

时间:2023-04-06 13:07:55浏览次数:32  
标签:浮动 color 清除 height width 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>
        .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;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <!-- <div class="clear"></div> -->
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <span class="clear"></span>
    </div>
    <div class="footer"></div>

</body>

</html>

标签:浮动,color,清除,height,width,background,二毛,200px
From: https://blog.51cto.com/u_15987796/6172656

相关文章

  • 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;......
  • CSS12.浮动
    浮动1.浮动(float)1.1CSS布局的三种机制网页布局的核心——就是用CSS来摆放盒子CSS提供了3种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:普通流(......
  • jmeter清除脚本历史记录
    获取许多朋友跟我一样有个疑问,那就是jmeter保存的脚本历史记录究竟如何删除,在下图中:“文件—>最近打开—>历史记录”便可以看到我们之前操作过的脚本,确实脚本的保留对......
  • css基础 CSS 布局 – Overflow、Float 浮动、CSS 布局 – 水平 垂直居中对齐
    阅读目录CSS布局–Overflowoverflow:visibleoverflow:hiddenoverflow:scrolloverflow:autoverflow-x和overflow-y所有CSSOverflow属性CSSFloat浮动float属性......
  • 浮动
    浮动浮动的定义float属性定义元素在哪个方向浮动,任何元素都可以浮动.值描述left元素向左浮动right元素向右浮动浮动的原理浮动以后使元素脱离了......
  • 盒子文字的阴影 和 浮动
    知识点一:盒子模型的阴影是四个数值,box-shadow:10px   10px 10px  -4px   rgba(0,0,0,0.3);文字阴影:text-shadow:5px 6px  5px  rgba(0,0,0,0.3);知识点......