为什么要清除浮动？

最新推荐文章于 2024-01-19 22:39:36 发布
最新推荐文章于 2024-01-19 22:39:36 发布
阅读量573 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Meroy0/article/details/99094030
版权
为什么要清除浮动？

是为了解决 父元素因为子元素浮动而引起的内部高度为0的问题。
布局：

<body>
<div class="father">
    <div class="big">盒子1</div>
    <div class="small">盒子2</div>
    大盒子
</div>
</body>

样式：

<style>
    .father{
        border: 1px solid darkred;
        width: 400px;
    }
    .big{
        width: 100px;  height: 100px;
        background-color: orangered;
    }
    .small{
        width: 50px;  height: 50px;
        background-color: mediumpurple;
    }
</style>

在这里插入图片描述
盒子1和2都设置浮动后
.big, .small{
float: left;
}
解决方法
使用after伪元素清除浮动（推荐使用）

// 先给父元素增加一个类名 clearfix ，然后在样式中添加如下内容
.clearfix:after{
display: block;
content: ‘’;
clear: both;
visibility:hidden; // 允许浏览器渲染，但不显示出来，这样才能实现清除浮动。
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式， 号只有IE6-IE7执行，其他浏览器不执行/
}
优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素 :after，使用zoom:1触发hasLayout。

4.使用before和after双伪元素清除浮动

.clearfix:after, .clearfix:before{
content: “”;
display: block;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}

Meroy0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css为什么要清除浮动？浮动如何清除
lin123_00的博客
04-29 1757
浮动在页面中有着很大的作用，很多人在做网站的时候，都会遇到浮动的效果，但是很多人都不知道css为什么要清除浮动？以及浮动如何清除？下面我们来了解一下。 首先小编在这里谢谢大家一直的支持，每天都会更新十个web前端基础内容，需要的可以关注我，另外也可以进我的web学习交流群1045267283，领取资料学习资料笔记，可以跟里面的小伙伴一起学习一起成长，不懂的问题也可以问我，随时给大家解答。再次感谢...
浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么
09-25
因此，我们需要“清除浮动”或者说“闭合浮动”，以确保容器能够正确包裹其内的浮动元素。常见的清除浮动方法包括： 1. 添加额外的标签：在浮动元素后面插入一个带有`clear:both`样式的空`div`，这样可以创建一个新...
为什么要清除浮动？清除浮动的方式？
小花猫哒小栗子
06-03 2862
清除浮动是为了清除使用浮动元素产生的影响：浮动的元素，高度会塌陷，而高度的塌陷使我们页面后i按的布局不能正常显示。 清除浮动的方式： 1、额外标签法：给谁清除浮动，就在其后额外添加一个空白标签。 优点：通俗易懂，书写方便。 缺点：添加许多无意义的标签，结构化比较差。 2、父级添加overflow方法：可以通过触发BFC的方式，实现清除浮动的结果。 优点：代码简洁，慎用，若该父盒子里还有position定位会引起麻烦。 缺点：内容增加多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。 ove.
为什么要清除浮动？清除浮动的方式
ZhangYu_010228的博客
04-27 2375
非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面影响布局。这种现象被称为浮动（溢出）。
为什么会出现浮动？为什么要清除浮动？清除浮动的几种方法？
weixin_61738415的博客
02-06 270
为什么会出现浮动？为什么要清除浮动？清除浮动的几种方法？
清除浮动有哪些方法？为什么要清除浮动？
圆圆的 JavaScript 博客
05-06 658
什么是清楚浮动？清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。为什么要清除浮动？1.导致背景不能正常显示，如果对父级设置了背景属性，导致父级不能撑开，会影响到背景图片不能正常打开。2.边框不能撑开，由于子级使用了浮动效果，并且已经产生了浮动，父级不能撑开，所以影响边框不会随着内容的变化而变化。
为什么要清除浮动?
Suffering_Dark的博客
01-19 567
(最开始跟着尚硅谷学了一遍, 懂了, 后来忙着学后端就前端就没咋看了, 回过头来再学的前端的时候这里又忘了, 做个笔记记录一下吧!在最初, 浮动是用来实现文字环绕图片效果的.为解决这些问题, 需要清除浮动.
什么是清除浮动？为什么要清除浮动？如何清除浮动? 真的很简单～
weixin_43140637的博客
04-05 1040
很多新手学习CSS的时候，都会遇到的一个问题，为什么我用float浮动布局的时候，布局会变得很乱，到底是哪里出了问题？ 首先要弄明白什么是父容器高度塌陷，意思就是一个父容器里面装了很多个子容器，父容器的高度被子容器挤没了，因为子容器用了css的float浮动，造成了父容器高度塌陷，那如何解决这个问题，我们先往下看。 清除浮动前：父容器高度塌陷 div1是父容器，div2和div3是子容器，子容器分别用了float：left和float：right 清除浮动后：父容器高度正常 ...
css浮动（为什么要清除浮动？清除浮动有哪几种方式？）
lllmtx的博客
08-15 936
* 为块级元素添加clear属性 *//* 为块级元素添加clear属性 *//* 为块级元素添加clear属性 *//* 为块级元素添加clear属性 *//* 为块级元素添加clear属性 *//* 为块级元素添加clear属性 *//* 脱离文档流，空间释放 *//* 脱离文档流，空间释放 *//* 脱离文档流，空间释放 *//* 脱离文档流，空间释放 *//* 脱离文档流，空间释放 *//* 脱离文档流，空间释放 *//* 脱离文档流，空间释放 *//* 伪元素默认是行元素 */
面试题22：为什么需要清除浮动？清除浮动的方式
qq_51066068的博客
04-26 2177
面试官：请问为什么需要清除浮动？清除浮动的方式 浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。 浮动的工作原理： 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象） 浮动元素碰到包含它的边框或者其他浮动元素的边框停留 浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的.
那些年我们一起清除过的浮动
02-03
我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨...
父元素的高度为0利用伪元素:after清除浮动可解决问题
09-25
通过将`:after`伪元素的`content`属性设置为空字符串（`content:""`），然后将其`display`属性设置为`block`，使其成为块级元素，最后设置`clear:both`，我们可以达到与添加额外`<div>`相同的效果，即清除浮动并恢复...
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
pillow_jxl_plugin-1.2.5-cp39-none-win_amd64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pi_heif-0.17.0-cp38-cp38-win_amd64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
页面布局时为什么会出现浮动？如何清除浮动？
06-06
还有一种方法是在包含浮动元素的父元素上设置 overflow 属性为 auto 或 hidden。例如： ```css .container { overflow: auto; } ``` 这种方法的原理是让浮动元素的高度被包含在父元素中，从而防止浮动元素对后面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值