如何不使用额外标记清除浮动元素

最新推荐文章于 2022-03-06 14:54:31 发布
原创 最新推荐文章于 2022-03-06 14:54:31 发布 · 140 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS

本文介绍了三种清除CSS浮动的方法：1. 容器元素整体浮动；2. 使用overflow:hidden属性；3. 利用:after伪类。这些技巧有助于解决网页布局中常见的浮动问题。
原文地址:
http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/

作者提到的三种方法：

1) 将容器元素一起浮动
2) 在容器元素上使用 overflow: hidden
3) 使用:after这样的css伪类
iteye_12165
关注
CSS清除浮动-额外标签法
m0_46744635的博客
08-17 764
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS清除浮动-额外标签法</title> <style> .box{ widt...
父元素的高度为0利用伪元素:after清除浮动可解决问题
09-25
然而，这种方法虽然有效，但会在HTML中引入不必要的额外标记，增加页面复杂度，同时也可能对浏览器的渲染性能造成一定影响。为了解决这个问题，CSS提供了一种更优雅的解决方案，那就是使用伪元素`:after`。 `:after...
不使用新的div来清除浮动
MistyWood的博客
03-18 196
在父元素里添加display: flow-root;属性
清除浮动--额外标签法
jjlome的博客
11-21 601
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <!--额外标签法也称为隔墙法。 额外标签法会在浮动元素末尾添加一个空标签。例如 <div style="clear:both"></div&gt
清除浮动
浅笑如伤的博客
10-13 239
一、为什么要清除浮动？ 清除浮动：使父元素围住浮动的子元素，避免对后续元素造成影响。 二、方式 1、给父元素设置overflow:hidden;或float:left;或position:absolute;触发块级格式化上下文(BFC) 2、利用clear样式 在浮动元素之后加入新元素，设置clear样式 .clear-div{ clear:both; } 这种方式的不完美之处在于增加了一个专门用于清除浮动的元素 推荐使用伪元素，如下 .clearfix:after { .
392day（额外标签法和overflow清除浮动，伪元素清除浮动）
orangecloudy的博客
10-31 455
 《2018年10月31日》【连续392天】 标题：额外标签法和overflow清除浮动，伪元素清除浮动； 内容： &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; * { margin: 0px;
浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么
09-25
因此，我们需要“清除浮动”或者说“闭合浮动”，以确保容器能够正确包裹其内的浮动元素。常见的清除浮动方法包括： 1. 添加额外的标签：在浮动元素后面插入一个带有`clear:both`样式的空`div`，这样可以创建一个新...
使用三种方法，练习使用3种方式解决内容部分父级盒子高度塌陷 1.使用空标记清除浮动 2.使用after伪对象清除浮动 3.使用BFC解决高度塌陷问题
最新发布
03-20
用户提到的三种方法：空标记清除浮动、after伪对象清除浮动、BFC。这三种方法应该都是常见的解决方案。我需要分别解释每种方法的原理、步骤，并给出代码示例。 首先，空标记清除浮动。我记得这种方法是在浮动元素的...
css清除浮动的几种方法以及对应规范说明
09-25
CSS清除浮动是为了处理浮动元素对周围元素布局的影响，特别是防止父元素因浮动元素而高度塌陷。以下是对清除浮动的几种方法及其规范说明的详细解释： 1. **使用`clear:both`** 当一个元素设置`clear:both`时，这个...
css 完美清除浮动的两种解决方案
09-27
更现代的解决方案是使用`display:flex`或`display:grid`布局，它们可以自动处理子元素的浮动，无需额外的清除浮动操作。但在老版本浏览器中可能不兼容，因此在实际项目中需要根据目标浏览器范围来选择合适的清除...
[译][部分][clear float]不通过添加额外标签来清除浮动
Patrick's 专栏
09-29 197
这些天看了些CSS方面的书,做了些笔记,做个记录并且share一下 前言:原文在这里 [url]http://positioniseverything.net/easyclearing.html[/url] 看懂英文和译成汉语完全是两码事儿啊, 翻译的各种不专业, 并且只译了和标题有关的部分内容(米有精力能力通篇来啊), 但是我没翻译的内容也非常重要! 都是一些issue啊, 技巧神马的,...
清除浮动的4种方式
田兴的博客
07-27 5万+
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 如下: 给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。 当我给内部两个盒子加上float属性的时候 底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 清除浮动的方法（最常用的4种） 一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。 优点： 通俗易懂，书写方便。（
清除浮动的四种方法
A_home的博客
11-21 3150
浮动的元素会脱离标准流（文档流），浮动的盒子不再保留原先的位置，清除浮动的本质就是清除浮动元素带来的影响，策略——闭合浮动
清除浮动的七种方法
m0_50569176的博客
07-27 3780
浮动元素会脱离文档流，导致不占据页面空间，所以会对父元素带来高度塌陷。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0。 为解决浮动带来的负面影响，需要清除浮动。 清除浮动的方式有很多种，实现的原理主要是靠clear属性，和触发新的BFC。 清除浮动的方法归纳为以下几点： 1.直接设置父元素高度。 优势：简单 弊端：必须要知道父元素高度是多少。 2.设置父元素浮动。 优势：代码少，无语义化问题 我们知道，元素浮动后会创建一个独立的BFC区域，在这个区域中计算高度时需要..
CSS中的浮动和清除浮动
weixin_30678821的博客
09-27 293
浮动到底是什么？ 浮动核心就一句话：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。请默念3次！ 浮动最初设计的目的并没那么多事儿，就只是用来实现文字环绕效果而已，如下所示： 文字环绕效果 但是早期的前端开发者发现：浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的一个神奇的存在，在inline-block出...
浮动元素引起的问题及清除浮动的四种方式
Delicia_Lani的博客
07-18 605
为什么需要清除浮动？ （1）父元素的高度无法被撑开，影响与父元素同级的元素； （2）与浮动元素同级的非浮动元素（内联元素）会跟随其后； （3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解决方法 清除浮动的方式： （1）使用CSS中的clear:both;（放一个空的div，并设置上述css）,属性来清除元素的浮动可解决2、3问题 （2）对于问题1，添加如...
清除浮动的四种方式及其原理理解
weixin_34072857的博客
10-18 3289
本文介绍了四种清除浮动的方法，并尝试解释其原理。在理解了各种清除浮动的原理之后，你会发现，很多清除浮动的方法本质上其实是一样的。掌握这些原理，相信你可以根据场景和需求，灵活运用原则发展出不同的清除浮动的方法，而不再死记或拘泥于文中提到的方法。 一、为什么要清除浮动 在讲清除浮动的方法之前，我们先来了解一下为什么要清除浮动，清除浮动的目的是什么，即，要解决什么样的问题。来看一个浮动的例子(略去了文字...
清除浮动的五种方法
m0_51621504的博客
03-06 447
高度塌陷，清除浮动
清除浮动的最常用的四种方法，以及优缺点
热门推荐
h_qingyi的博客
07-29 29万+
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 1.如下，我给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 2.当我给内部两个盒子加上float属性的时候 顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了   总结...
CSS技巧：清除浮动与闭合浮动元素
"本文主要探讨了CSS中处理浮动元素导致的父容器高度塌陷的问题，以及几种解决策略，包括插入额外标签、使用:after伪类、设置overflow和使用浮动等方法，同时也涉及到不同浏览器的兼容性问题。" 在CSS布局中，浮动...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值