CSS复习(1)——清除浮动

最新推荐文章于 2024-10-02 15:35:50 发布
最新推荐文章于 2024-10-02 15:35:50 发布
阅读量157 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45814762/article/details/108593493
版权

1. 为什么需要清除浮动？
​ 由于父级盒子在很多情况下，不方便给高度，但是子盒子浮动又不占有位置，就会影响下面的标准流盒子(标准流盒子上移)。
2. 清除浮动的本质
清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

  • 如果父盒子本身有高度，则不需要清除浮动
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度
  • 父级有了高度，就不会影响下面的标准流了

3.实现

  1. 给父元素添加高度
.father {
            width: 200px;
            height: 300px;
            border: 1px solid red;
        }
        
        .big {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
        
        .small {
            width: 50px;
            height: 50px;
            background-color: yellow;
            float: left;
        }
        
        .footer {
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>
</body>

在这里插入图片描述
2. 给父级元素设置overflow:hidden不推荐

内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

 <style>
        .father {
            width: 200px;
            height: 250px;
            border: 1px solid red;
            overflow: hidden;
        }
        
        .big {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
        
        .small {
            width: 50px;
            height: 50px;
            background-color: yellow;
            float: left;
        }
        
        .footer {
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>
</body>
  1. 额外标签法(在子元素后面追加一个空白标签)不推荐

添加无意义标签，语义化差

.father {
            border: 1px solid red;
        }
        
        .big {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
        
        .small {
            width: 50px;
            height: 50px;
            background-color: yellow;
            float: left;
        }
        
        .footer {
            width: 200px;
            height: 100px;
            background-color: blue;
        }
         .clear {
            clear: both;
        } 
    </style>
</head>

<body>
    <div class="father">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
    <div class="footer"></div>
</body>

在这里插入图片描述
4. 父级添加after伪元素推荐

伪元素是行内元素 正常浏览器清除浮动方法

 <style>
        .father {
            width: 200px;
            height: 250px;
            border: 1px solid red;
        }
        
        .clear:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .clear {
            zoom: 1;
            /* 兼容ie6-7 */
        }
        
        .father .big {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
        
        .small {
            width: 50px;
            height: 50px;
            background-color: yellow;
            float: left;
        }
        
        .footer {
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="father clear">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>
</body>
  1. 父级添加双伪元素推荐
<style>
        .father {
            width: 200px;
            height: 250px;
            border: 1px solid red;
        }
        
        .clear:before,
        .clear:after {
            content: "";
            display: table;
        }
        
        .clear:after {
            clear: both;
        }
        
        .clear {
            zoom: 1;  /* 兼容ie6-7 */
        }
        
        .father .big {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
        
        .small {
            width: 50px;
            height: 50px;
            background-color: yellow;
            float: left;
        }
        
        .footer {
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="father clear">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>
</body>

总结

  1. 给父级设置高度height
  2. 结尾处添加一个空白div标签设置clear:both
  3. 父级定义伪类:after和zoom
  4. 父级定义overflow:hidden
  5. 父级也浮动，但是需要定义宽度
小铃铛的打怪之路
关注
专栏目录
CSS复习（4）—— 浮动
m0_67841039的博客
04-28 93
一、浮动 1.1 浮动的作用 2.1 浮动的代码 3.1 浮动的特点 二、清除浮动 清除浮动的方法有哪些？ 1. 直接设置父元素高度 2. 额外标签法 3. 单伪元素清除法 4. 双伪元素清除法 5. 给父元素设置overflow : hidden 下面对这些方法进行分别介绍： 1.1 清除浮动的介绍 2.1 清除浮动的方法 — ① 直接设置父元素高度 2.2 清除浮动的方法 — ② 额外标签法 2.3 清除浮动的方法 — ③ 单伪元素清...
css细节复习笔记——浮动
weixin_30315723的博客
04-03 87
CSS除了能够改变字体、背景和所有其他属性，还能够完成基本布局任务。 div+css通过浮动和定位、盒子模型等技术应用，是最常用的布局方式。 定位的基本思想很简单，它允许定义元素框相对于其正常位置应该出现在哪里，或者相对于父元素，另一个元素甚至浏览器窗口本身的位置。 另一方面，css1提出浮动。浮动不完全是定位，不过，他当然也不是正常流布局。 浮动 声明<img src ="...
CSS复习——B站
xiaopi3的博客
11-29 350
css常识
【自学CSS笔记第10篇】——CSS浮动及清除浮动（此一篇足以）
m0_64231944的博客
10-28 234
CSS浮动及清除浮动
前端CSS——浮动
Y_jun1004的博客
06-19 196
css 浮动
CSS基础复习总结（一）——元素隐藏、清除浮动
weixin_52889573的博客
11-27 173
1.display:none //使用该方法时隐藏的元素将不会占用原来的位置。
FE复习企划——3. CSS布局
aceyaya的博客
07-06 193
CSS布局3.1 布局概述01.布局简述02.常规流03.行级排版上下文IFC04.块级排版上下文BFC3.2 Flex Box（上）01.如何开启？02.flex-flow03.flex3.1flex-grow3.2flex-shrink3.3flex-basis3.3 Flex Box（下）01.justify-content02.align-items、align-self03.align-content04.order05.经典布局例子3.4 Grid 布局（上）01.定义网格02.划分网格03.给
Bootstrap复习三——CSS组件1
小头Sophia
02-18 683
1.Bootstrap基本模板： html> lang="zh-CN"> charset="utf-8"> http-equiv="X-UA-Compatible" content="IE=edge"> //用最新的IE内核来解析 name="viewport" content="width=device-width, initial-scale=1">
CSS文档流——position，float属性详解
m0_67623521的博客
06-08 853
​ 文档流的一般情况可能不满足我们的设计需求，可以使用不同的布局方式来改变顺序，当前主要的布局方式有：浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等来改变正常的文档流。......
纯html加css简单网页.zip
07-18
5. 浮动（`float`）和清除（`clear`）：用于调整元素在流体布局中的位置。 6. 定位（`position`）：`static`、`relative`、`absolute`、`fixed`，控制元素相对于其正常位置或其他元素的位置。 7. 响应式设计：使用...
WEB前端学习 （6）CSS复习五（布局-浮动）
Puppy_CQ的博客
04-27 168
一浮动（float) 网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置. 传统网页布局的三种方式 CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：  普通流（标准流）  浮动  定位 1.标准流（普通流/文档流） 所谓的标准流: 就是标签按照规定好默认方式排列. 1. 块级元素会独占一行，从上向下顺序排列。  常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 2. 行内元素会按照顺..
DIV+CSS学习笔记总结篇
qianduan666a的博客
07-29 910
DIV+CSS学习笔记总结篇 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位： web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望： 未来IT行业企业需求最多的人才 结合最新的html5抢占移动端的市场 自己创业做老板 随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标： 第一、梳理知识架构 负责内容的HTML 负责外观的css（层叠样式表） 负责行为
HTML+CSS面试题总结（附答案+视频讲解）
xm1037782843的博客
06-25 2749
前端面试题总结 面试题总结 html+css面试题 元素隐藏、盒子垂直居中
CSS画出三角形的做法
mingangel的博客
10-01 252
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 298
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS 盒子属性
m0_74012211的博客
10-02 266
CSS 盒子属性
如何用JavaScript编写一个简单的计数器
Jiaberrr的博客
10-01 326
在网页开发中，计数器是一种常见的功能，它可以帮助我们记录点击次数、显示时间等。下面我将介绍如何在HTML页面中使用JavaScript实现一个基本的计数器。
【CSS】position
最新发布
小秀的博客
10-02 173
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
CSS清除浮动：方法与实战解析
"CSS清除浮动的方法详解" 在网页布局中，浮动元素经常被用来实现各种复杂的布局效果，如图文混排。然而，浮动元素会导致其父元素的高度塌陷，即父元素无法自然包含其内部浮动子元素，从而引发一系列布局问题。为了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值