清除浮动的方式和优缺点

最新推荐文章于 2022-12-14 14:00:54 发布
最新推荐文章于 2022-12-14 14:00:54 发布
阅读量534 收藏
点赞数
分类专栏： css面试题 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44746317/article/details/123524785
版权

给每个盒子设定固定宽度和高度

优点：简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面

缺点：非自适应，浏览器的窗口大小直接影响用户体验

给外部父盒子也添加浮动

方法方便

对页面布局不友好，不利于维护

给父盒子添加overflow属性，触发bfc

简单快速

overflow：auto 有可能出现滚动条，影响美观，overflow：hidden可能会带来内容不可见的问题

父盒子里最下方引入清除浮动块

用最下面的空盒子清除浮动，把盒子重新撑起来

引入了冗余元素

after伪类清除浮动，外部盒子的after伪元素设置clear属性

是一种纯css的解决浮动造成的盒子塌陷方法，没有引入任何冗余元素

但是低版本ie不兼容

东方萝卜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS清除浮动的常用方法优缺点分析
09-27
下面我们将详细探讨这些方法的优缺点。 1. **额外元素法** 这种方法是在浮动元素后面添加一个额外的非浮动元素，如`<div class="clear"></div>`，并为其设置`clear: both`样式。这将强制元素之后的内容下移，恢复...
css 怎么清除浮动
09-25
标题中的“css 怎么清除浮动”是一个关于...不同的方法有各自的优缺点，选择哪种取决于项目的需求、团队的技术栈以及对浏览器兼容性的考虑。在不断学习和实践中，开发者可以更好地掌握这些技巧，提高布局设计的能力。
清除浮动方法及优缺点
zhangchunjiang2014的专栏
08-12 626
方法1：给父级div定义 高度 代码如下： .div1{background:#000;border:1px solid red; /*解决代码*/height:200px;} .div2{background:#f00;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%
清除浮动的几种方式，各自的优缺点？
weixin_30795127的博客
07-18 480
①给父元素单独定义高度 　　优点：简单快速、代码少。 　　缺点：无法进行响应式布局。 ②在标签结尾处加空div标签<div style="clear: both"></div> 　　优点：简单快速、代码少，兼容性较高。 　　缺点：增加空标签，不利于页面优化。 ③父级定义overflow:hidden 　　优点：简单快速、代码少，兼容性较高。 　　缺点：...
清除浮动的几种方式，各自的优缺点
php_martin的博客
07-15 151
清除浮动的几种方式，各自的优缺点。
清除浮动的五种方法以及优缺点
最新发布
zz130428的博客
12-14 1014
clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来。: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both。：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。：添加许多无意义的标签，结构化比较差。：符合闭合浮动思想，结构语义化正确。：通俗易懂，书写方便。
清除浮动的最常用的四种方法，以及优缺点
热门推荐
h_qingyi的博客
07-29 28万+
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 1.如下，我给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 2.当我给内部两个盒子加上float属性的时候 顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了   总结...
CSS清除浮动方法汇总
10-20
每种方法都有其适用场景和优缺点。传统clear属性适用于简单的布局，而额外空元素法和伪元素法则更适合复杂布局且兼容性较好的情况。Flexbox和Grid布局是现代CSS布局的首选，它们提供了更强大、更灵活的布局解决方案...
CSS 清除浮动方法大全
09-25
CSS 清除浮动是网页布局中至关重要的一个概念，主要是为了解决元素浮动后对其周围元素产生的影响，防止内容被浮动元素覆盖或布局混乱...在实际开发中，理解各种方法的优缺点，结合具体情况选择合适的方法是至关重要的。
清除浮动常用的四种方法及优缺点
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
03-12 2030
清除浮动主要是解决父级元素因为子级浮动引起的内部高度为0的问题。 1.额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 （不推荐使用） 优点：通俗易懂，书写方便。 缺点：*添加许多无意义的标签，结构化比较差。 2.父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。但是必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 优点： 简单、代码少、浏览器支持好 缺点： 内容增多时候容易造成不会自动换行导致内
前端基础面试题
weixin_45643337的博客
06-24 4517
前端基础面试题 1、 的title 和alt 有什么区别 alt属性和title属性相同点： 它们都会出现浮层，显示自己设置的图片相关的内容。 alt属性和title属性不同点： alt属性:1.当图片加载不出来的时候，就会在图片未显示的地方出现一段alt设置的属性内容。这个属性的作用是为了给未加载的图片显示提示信息，即使在网络比较差的时候，用户也可以知道图片的内容，方便用户浏览网页。同时在程序员对网站维护的时候也能更快的查找到问题。2.浏览器的搜索引擎可以通过alt属性的文字描述来获取图片。 titl
HTML学习之路-1
luckyxiaoqi的博客
12-11 164
清除浮动有哪些方式？ （1）父级div定义height。 （2）结尾处加空div标签clear:both。 （3）父级div定义伪类:after和zoom。 （4）父级div定义overflow:hidden。 （5）父级div定义overflow:auto。 （6）父级div也浮动，需要定义宽度。 （7）父级div定义display:table。 （8）结尾处加br标签clear
2020前端面试基础293题，完整答案总结！
qq_43356200的博客
07-14 278
基础篇 一、HTML、HTTP、web综合问题 前端面试基础题：前端需要注意哪些SEO 前端面试基础题：<img> 的 title 和 alt 有什么区别 前端面试基础题：HTTP的几种请求方法用途 前端面试基础题：从浏览器地址栏输入url到显示页面的步骤 前端面试基础题：如何进行网站性能优化 前端面试基础题：HTTP状态码及其含义 前端面试基础题：语义化的理解 前端面试基础题：介绍一下你对浏览器内核的理解？ 前端面试基础题：html5有哪些新特性、移除了哪些元素？ 前端面试基础题：HTML5
前端面试题汇总（css基础篇）
weixin_42677762的博客
10-14 1661
前端面试题汇总（css基础篇） 1 css sprite是什么,有什么优缺点 概念：将多个⼩图⽚拼接到⼀个图⽚中。 通过 background-position 和元素尺⼨调节需 要显示的背景图案。 **优点：**减少HTTP请求数，极⼤地提⾼⻚⾯加载速度 增加图⽚信息重复度，提⾼压缩⽐，减少图⽚⼤⼩。 更换⻛格⽅便，只需在⼀张或⼏张图⽚上修改颜⾊或样式即可实现 **缺点：**图⽚合并麻烦 维护麻烦，修改⼀个图⽚可能需要从新布局整个图⽚，样式。 2 display: none;与 visibility:
清除浮动的方法及优缺点
......的博客
09-23 1292
加入float: left;
【面试题系列|前端面试题】前端高频面试题总结（2021年最新版）
孙叫兽的博客
12-23 3万+
面试过不少前端从业者，简历写的平平淡淡，别人会的技能他也都会，看起来什么都掌握一些；有些会请过来当面聊一下，有些就直接拒绝了（如果是公司内要求独立完成项目的岗位，简历里放很多学习时候的DEMO项目，没有真实上线的项目，这种简历一般都会拒绝掉）。 当我们去一家公司面试，面试官有很大的主动权，面试官属于攻击方，求职者属于防守方，我们不可能什么方向都研究的非常深，所以扬长避短是最好的方式，推荐大家要做帐篷型的人，而不是水桶型的人；市场上岗位非常多，我们需要做的就是找到适合自己长处发展的那个职业！ 面试的时候一
面试刷题10-26
wwxy1995的博客
10-26 1737
1.发起Http请求涉及哪些协议 TCP, DNS, IP， ARP等 2.TCP，UDP区别 3.面向报文面向连接 4.哈希表的有序怎么保证 在维护一个链表，记录key 5.redis数据类型，zset讲一下 有序集合，底层是跳跃表 6.HashMap原理，线程安全问题，ConcurrentHashMap原理，Hashtable 7.Synchronized 同步关键字，可以...
CSS清除浮动：方法与解析
每种方法都有其优缺点，选择哪种取决于项目需求、浏览器兼容性和代码维护性。在CSS规范中，有四种类型的元素可以产生一个“块级格式化范围”，从而自动闭合内部的浮动元素，包括浮动元素、绝对定位元素、inline-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值