清除浮动的几种方式，各自的优缺点

最新推荐文章于 2023-02-01 07:50:27 发布
原创 最新推荐文章于 2023-02-01 07:50:27 发布 · 209 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #html #css3

本文讨论了如何处理父级div因子元素浮动导致的高度塌陷问题，提出了几种解决方案，包括使用空div clear:both、父级div定义伪类:after和zoom以及overflow:hidden。其中，使用伪类:after和zoom的方法被推荐，因其在多个网站中得到广泛应用。
  • 父级div定义height
  • 结尾处加空div标签clear:both
  • 父级div定义伪类:after和zoom
  • 父级div定义overflow:hidden
  • 父级div也浮动，需要定义宽度
  • 结尾处加br标签clear:both
  • 比较好的是第3种方式，好多网站都这么用
清除浮动的几种方式，各自的优缺点、如何垂直居中一个浮动元素? 水平居中的方法、垂直居中的方法？
星辰迷上大海的博客
01-02 1122
清除浮动的方式有直接设置浮动父元素高度 height、额外标签法、单伪元素清除法 :after 和 zoom 、伪元素清除法，各有优缺点；垂直居中浮动元素可以使用 Flexbox 布局实现；垂直居中一个 可以使用 CSS 的 vertical-align 属性；
css别忘记清除浮动clear:both
10-30
本文将详细介绍几种常用的清除浮动的方法，并分析各自的优缺点。 #### 一、使用空标签清除 这种方法是最简单的清除浮动方式之一，只需要在浮动元素后面添加一个空的`<p>`标签或者`<div>`标签，并应用`clear:both;`...
清除浮动的方法以及优缺点
奶茶控
08-06 275
为什么要清除浮动？ 清除浮动是为了解决，父元素因为子级元素浮动而引起的内部高度为零的问题。 清除浮动的几种方式 1、额外标签法 使用方法：在浮动元素末尾添加一个空标签。 <div style="clear:both"></div> 虽然书写简单，但是额外增加了代码量 2、父级元素添加overflow属性 overflow:hidden; hidden会隐藏溢出部分内容 scroll：内容溢出时会产生滚动条 auto：不管内容有没有溢出都要添加滚动条 3、after伪元素清除浮
css清除浮动的几种方式以及他们的优缺点
业余前端的职业经历
03-26 890
元素的浮动,会让元素脱离文档流,浮动带来的影响无非就是高度坍塌的问题. 下面我们来说一下解决浮动带来的影响的几种解决方案,还有他们之间优缺点 1.给父元素设置高度 既然子元素脱离文档流之后,由于之前是靠子元素撑起来的,所以当子元素脱离文档流的时候自然父元素高度就变成零了 这个时候我们可以给父元素设置高度让它重新"撑起来" 缺点是:你必须精确知道子元素的高度,但是很多时候元素的内部的高度我们不能精确...
清除浮动的几种方法以及优缺点
weixin_58855537的博客
10-12 348
清除浮动是面试时的高频考点，所以也必须要掌握 我们写一个例子，定义一个box父盒子，里面有两个子盒子，父盒子不给高度，里面的两个子盒子浮动 <div class="box"> <div class="left"></div> <div class="right"></div> </div> .box { width: 400px; border: 5px solid red; .
清除浮动的四种常用方法及其优缺点
MoeCodeFree的博客
09-12 567
清除浮动的四种常用方法及其优缺点 浮动带来的问题 众所周知，清除浮动主要是为了解决如下两个问题 1，子元素浮动导致父元素高度为0 浮动前 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="vi
清除浮动的几种方式，各自的优缺点？
weixin_30795127的博客
07-18 1475
①给父元素单独定义高度 　　优点：简单快速、代码少。 　　缺点：无法进行响应式布局。 ②在标签结尾处加空div标签<div style="clear: both"></div> 　　优点：简单快速、代码少，兼容性较高。 　　缺点：增加空标签，不利于页面优化。 ③父级定义overflow:hidden 　　优点：简单快速、代码少，兼容性较高。 　　缺点：...
CSS清除浮动的常用方法优缺点分析
09-27
为了解决这个问题，开发者通常会采用几种不同的清除浮动（clear float）方法。下面我们将详细探讨这些方法的优缺点。 1. **额外元素法** 这种方法是在浮动元素后面添加一个额外的非浮动元素，如`...
css 怎么清除浮动
09-25
清除浮动主要有以下几种方法： 1. **伪类`:after`**：通过在浮动元素后面添加一个看不见的元素，并设置`clear:both`或`content:" "`，可以达到清除浮动的效果。这种方法结构语义化正确，但复用可能导致代码量增大。...
css清除浮动
最新发布
05-23
以下是几种常用的方法以及它们的优缺点： #### 方法一：使用 `clear` 属性 通过为一个元素设置 `clear: both;`，可以让该元素位于任何浮动元素下方。这种方式简单直观，但在实际开发中较少单独使用，因为它需要额外...
CSS清除浮动方法大全
11-28 319
这篇文章主要介绍了CSS清除浮动方法大全(小结)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 1、父级div定义伪类：after和zoom ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Left Right div2 原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(I...
CSS清除浮动的四种常用方法及其优缺点
Moony_wy的博客
01-30 1073
什么是CSS清除浮动？ 在非IE浏览器下，当容器的高度为auto（没有设置），且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 CSS四种常用的清除浮动方法：额外标签法清除浮动；父级添加overflow: hidden清除浮动; 父级添加after伪元素清除浮动；父级添加双伪元素清除浮动。
清除浮动常用的四种方法及优缺点
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
03-12 2150
清除浮动主要是解决父级元素因为子级浮动引起的内部高度为0的问题。 1.额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 （不推荐使用） 优点：通俗易懂，书写方便。 缺点：*添加许多无意义的标签，结构化比较差。 2.父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。但是必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 优点： 简单、代码少、浏览器支持好 缺点： 内容增多时候容易造成不会自动换行导致内
清除浮动的方式以及各自的优点、缺点
yzkdcsdn的博客
11-01 252
清除浮动的方式以及各自的优点 1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置 clear： both）不 推荐 o 优点：通俗易懂，方便 o 缺点：添加无意义标签，语义化差 2.父级添加 overflow 属性 （overflow：hidden）不推荐 o 优点：代码简洁 o 缺点：内容增多的时候容易造成不会自动换行导致内容被隐蔽掉，无法显示要溢 出的元素 3.给父级设置高度 o 优点：简单，代码少，容易掌握 o 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一 样时
清除浮动的五种方法以及优缺点
zz130428的博客
12-14 1153
clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来。: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both。：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。：添加许多无意义的标签，结构化比较差。：符合闭合浮动思想，结构语义化正确。：通俗易懂，书写方便。
清除浮动的几种方式？各自的优缺点？
hyqhyqhyqq的博客
02-01 225
为什么要清除浮动？清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题1.如下，我给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子2.当我给内部两个盒子加上float属性的时候顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了总结一下：当父元素不给高度的时候，内部元素不浮动时会撑开而浮动的时候，父元素变成一条线。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小码哥・Martin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值