前端清除浮动的方法

最新推荐文章于 2023-02-01 17:00:01 发布
最新推荐文章于 2023-02-01 17:00:01 发布
阅读量408 收藏 1
点赞数 1
分类专栏： 前端 css 浮动 文章标签： 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43488503/article/details/127240269
版权
前端 同时被 3 个专栏收录
15 篇文章 0 订阅
订阅专栏
css
1 篇文章 0 订阅
订阅专栏
浮动
1 篇文章 0 订阅
订阅专栏

清除浮动的四种方法

为什么需要清除浮动

如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0。由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。

方式1：额外标签法

  1. 在父元素内容的最后添加一个块级元素
  2. 给添加的块级元素设置clear:both;
<style>
   .head {
       width: 600px;
       margin: 0 auto;
       background-color: #FFCCCC;
   }
   .left {
       float: left;
       height: 300px;
       width: 200px;
       background-color: #FFFF99;
   }
   .right {
       float: right;
       height: 300px;
       width: 300px;
       background-color: #CCCCFF;
   }
   .box {
       height: 200px;
       width: 800px;
       margin: 0 auto;
       background-color: #CCCCCC;
   }
   .clearfix{
       clear: both;
   }
</style>
<body>
<div class="head">
   <div class="left"></div>
   <div class="right"></div>
   <!--清除新标签-->
   <div class="clearfix"></div>
</div>
<div class="box"></div>
</body>
</html>

方式2：使用overflow属性来清除浮动

在父元素中添加一个属性：overflow:hidden
一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）。

.head {
       width: 600px;
       margin: 0 auto;
       background-color: #FFCCCC;
       overflow: hidden;
   }

方式3：单伪元素清除法

  1. 定义伪元素，定义属性clear: both
/*使用伪元素代替了html中的额外标签*/
   .clearfix::after {
       content: "";
       display: block;
       clear: both;
   }
  1. 直接给父元素class中添加该伪元素
<div class="head clearfix">
   <div class="left"></div>
   <div class="right"></div>
</div>
<div class="box"></div>

方式4：双伪元素清除法

  1. 定义双伪元素
/*使用伪元素代替了html中的额外标签,clearfix::before解决外边距塌陷问题*/
   .clearfix::before, .clearfix::after {
       content: "";
       display: table;
   }
   .clearfix::after {
       clear: both;
   }
  1. 直接给父元素class中添加该伪元素
<div class="head clearfix">
   <div class="left"></div>
   <div class="right"></div>
</div>
<div class="box"></div>
ROUERYA
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最简洁的CSS清除浮动的方法
09-25
在实际开发中，常用的清除浮动方法主要有以下几种： 1. 使用clear属性：通过在浮动元素后面添加一个空的HTML元素，并给这个元素设置`clear:both`样式属性，来清除浮动的影响。这种方法简单，但是需要增加额外的DOM...
关于清除浮动塌陷的几种方法总结
12-11
同样在前端攻城狮的道路，我们都是真诚尽心尽力的去学习进取。奈何先是各大浏览器厂商的大战不断，导致我们这群学习的人苦不堪言，一片水生火热呀。不得不想进各种hack方法解决。（没错，这里就是吐槽的IE6！） ...
CSS清除浮动的方法
m0_66477165的博客
03-01 281
自己整理了清除浮动的一些方法 CSS清除浮动的方法： 1.额外添加标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。 优点：通俗易懂，书写方便。（不推荐使用） 缺点：添加许多无意义的标签，结构化比较差。 给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可） 2.给父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。 优点：代码简洁（慎重使用，若该父盒子里还有position定位会引起麻烦） 缺点：内
前端清除浮动的方法有哪些？
最新发布
tang18533952786的博客
02-01 710
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。原理： 这个方式的原理和额外标签法的方式异曲同工，只是利用伪类向浮动元素的父盒子的后面添加了一个块级元素。原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。优点：代码少、兼容性好、不会有额外的标签、简单。一、前端清除浮动的几种方式。
前端面试:清除浮动的方法
m0_57263755的博客
05-05 202
1.给父元素设置overflow：hidden 2.给父级定义height，设置高度 3.使用空标签清除浮动，增加clear:both 4.使用after伪对象清除浮动
前端CSS怎么清除浮动？
最爱谭先森的博客
07-11 477
前端怎么清除浮动？ 方法一：使用带clear属性的空元素： 在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。 方法二：使用CSS的overflow属性： 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，
【前端学习笔记】清除浮动的四种方式
qq_43118757的博客
02-09 576
要实现如图布局 给黄蓝两个盒子设置浮动后导致高度塌陷，如下图。 源代码 <body> <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> <div class="box"></div> </body> .box1,.bo
css 怎么清除浮动
09-25
总的来说，清除浮动是CSS布局中的基础概念，理解和掌握各种清除浮动的方法对于前端开发者来说至关重要。不同的方法有各自的优缺点，选择哪种取决于项目的需求、团队的技术栈以及对浏览器兼容性的考虑。在不断学习和...
浮动清除常见方法
04-07
这个资源为前端开发布局中浮动布局的浮动清除常见方法,
div清除浮动css样式代码分享(4种方法)
09-25
这是一种更现代的清除浮动方法，利用CSS的`:after`伪元素和`zoom`属性。`:after`伪元素创建了一个看不见的元素，而`clear:both`确保了这个元素后面没有浮动元素。`zoom:1`是为了触发浏览器的hasLayout特性，使`:...
前端-清除浮动的三种方法
qq_39706777的博客
03-24 1085
放三个div，正常情况下没有浮动是这样的：div从上至下排列 <style> .div1{ width: 100px; height: 200px; background-color: red; } .div2{ width: 200px; ...
前端清除浮动的几种方法？及优缺点？
范德萨的博客
01-05 177
当我们使用css浮动时会造成脱离文档流，造成高度塌陷等问题以下是几种解决方法原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。优点：简单、代码少、浏览器支持好。
前端四种清除浮动的方法（css）
baldicoot_的博客
08-06 338
一，子级标签clear清除法 当完成局域性浮动后，找到最后一个浮动的盒子。 在盒子的后面添加一个单独的div ... ...(最后一个浮动的盒子) <div class="clear"> </div> 然后在css的样式里面添加如下标签 <style> ... ... .clear...
前端清除浮动
qq_32067151的博客
04-25 181
第一张方式：额外标签清楚法 <div style="clear: both;"></div> 特点：如果清除了浮动，父亲去自动检测孩子高度，以最高为准 优点：简单易懂 缺点：添加额外的标签破坏结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT...
前端——浮动清除
depers15的博客
06-19 537
当元素浮动时，他就不再占用文档流中的任何空间了，因此，父列表实际上什么东西都没有，他就会收缩，从而隐藏列表的背景，解决这个问题的方法有以下集几种： 方法一：添加一个清理的元素，但是会在页面上添加不必要的元素，所以不建议使用这种办法； 方法二：让父元素浮动，并且使用某个元素（比如站点页脚）对它进行清理，以便换行； 方法三：也就是我们使用最多的方法，采用 overflow:
前端的清除浮动
weixin_43384380的博客
01-26 116
清除浮动什么是float浮动如何清除浮动 什么是float浮动 脱离文档流，延迟父容器靠左或靠右进行排列 left ，right，none 只会影响后面的元素 内容默认提升半层 默认宽度根据内容决定 换行排列 主要给块元素添加，但也可以给内联元素添加 如何清除浮动 1. 上下排列：clear属性，表示清除浮动。 clear选值：left，right，both 清除同一侧跟float值相同，值不确定选择both <!DOCTYPE html> <html> <head&gt
前端css 清除浮动的几种方式
hector的博客
10-10 851
浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。 清除浮动的几种方式 1. 父级div定义 height 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。简单、代码少、容易掌握，但只适合高度固定的布局. 2. ...
BFC与清除浮动
qq_44833743的博客
09-21 242
BFC 的特性 内部的 Box 会在垂直方向上一个接一个的放置。 垂直方向上的距离由 margin 决定 bfc 的区域不会与 float 的元素区域重叠。 计算 bfc 的高度时，浮动元素也参与计算 bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面素。 如何清除浮动？ 不清除浮动会发生高度塌陷： 浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷） clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值