首页 > 试题广场 >

浮动会导致页面的非正常显示，以下几种清除浮动的方法，哪个是不

[单选题]
浮动会导致页面的非正常显示，以下几种清除浮动的方法，哪个是不推荐使用的？ 
  • 在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>
  • 通过设置父元素 overflow 值为 hidden
  • 父元素也设置浮动
  • 给父元素添加 clearfix 类
查看答案及解析
添加回答
.。oO头像 .。oO
不是还可以给父元素设置 标签：after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidder;}?
发表于 2016-09-23 15:57:55 回复(2)
牛客874522639号头像 牛客874522639号
https://blog.csdn.net/XNHYJSL/article/details/116053794?spm=1001.2014.3001.5501
发表于 2021-04-24 10:56:57 回复(0)
嘤嘤嘤护体！头像 嘤嘤嘤护体！
完美的解答: https://segmentfault.com/a/1190000004865198
发表于 2017-07-25 15:24:32 回复(3)
梦身头像 梦身
A选项中，通过添加空标签，是W3C推荐的，但会增加多余标签，一般不采用（非不推荐）。而父元素也添加浮动，则使整体浮动影响布局，不推荐。
发表于 2015-08-25 16:17:16 回复(2)
一剪梅88头像 一剪梅88
显然是C啊，四种方法都可以清除，最常用的是DA方法；B方法的话，如果子元素中有使用了绝对定位，在页面上显示是在父元素外面，一般就没法使用B方法了。大型项目一般会多层嵌套，如果采用给父元素设置浮动的方法，那么父元素的父元素很有可能也要设置浮动，页面布局很容易乱掉
发表于 2016-12-23 16:18:34 回复(1)
Paul-Liang头像 Paul-Liang
在许多前端推荐书籍中，是不推荐用空标签去清浮动的，毕竟空标签会显得代码臃肿、不整洁
发表于 2015-04-22 11:43:03 回复(0)
夏花爱秋叶头像 夏花爱秋叶 
## 清除浮动
```
		<div>
			<div class="one">
				<div class="two"></div>
			</div>
			<div class="three">
				<div class="four"></div>
			</div>
			<div class="five">
				<div class="six"></div>
			</div>
			<div class="seven">
				<div class="eight"></div>
				<div></div>
			</div>
		</div>
		
		/* 清除浮动 */
		/* 1. 父元素float,但是不可取，因为会影响到父元素这一层，不稳定 */
		.one{
			float: left;
			background: red;
			padding: 10px;
		}
		.two{
			float: left;
			width: 100px;
			height: 20px;
			background-color: gainsboro;
		}
		/* 2.父元素设置overflow:hidden */
		.three{
			overflow: hidden;
			padding: 10px;
			background-color: black;
		}
		.four{
			background-color: green;
			width: 100px;
			height: 20px;
			float: left;
		}
		/* 3. 设置父元素伪元素after清除浮动 clear:both */
		.five{
			background-color: blue;
			margin-top: 10px;
			padding: 10px;
		}
		.six{
			width: 100px;
			height: 20px;
			background-color: antiquewhite;
			float: left;
		}
		.five::after{
			clear: both;
			display: block;
			content: '';
		}
		/* 4.给子元素后面加一个兄弟元素，该兄弟元素设置clear:both */
		.seven{
			padding: 10px;
			background-color: gray;
			width: 300px;
			margin-top: 10px;
		}
		.eight{
			float: left;
			width: 100px;
			height: 20px;
			background-color: yellow;
		}
		.eight +div{
			clear: both;
		}
```
* `注意，如果是让浮动元素的父元素的兄弟元素不被浮动影响，那么就给兄弟元素添加clear:both;`

发表于 2020-04-19 23:07:53 回复(0)
西红柿挂面头像 西红柿挂面
清除浮动：
1.固定宽和高，但是无法做到自适应。
2.父容器浮动，影响到子容器
2.利用BFC规范，overflow（溢出问题）和display（父容影响）
3.设置空标签
4.利用伪类after
发表于 2019-11-09 16:52:07 回复(0)
一句话，。。。头像 一句话，。。。
清除浮动的几种方法：https://mp.csdn.net/mdeditor/79602171
发表于 2018-05-24 11:27:44 回复(0)
牛客732404号头像 牛客732404号
clearfix是什么类，消除浮动的吗？
发表于 2016-02-17 23:24:51 回复(3)
酚酞菠萝头像 酚酞菠萝
父元素也浮动影响整体布局
编辑于 2024-04-02 01:37:40 回复(0)
蒲公英想养花头像 蒲公英想养花
为父元素添加伪类元素 .clearfix:after { content: '.'; clear: both; display: block; height: 0; visibility: hidden; }
发表于 2023-04-08 21:24:49 回复(0)
牛客202555296号头像 牛客202555296号
加标签也不推荐OK？
发表于 2022-09-20 23:22:25 回复(0)
LadyGuanGuan头像 LadyGuanGuan
overflow属性指定如果内容溢出一个元素的框，会发生什么。默认值： visible内容不会被修剪，会呈现在元素框之外。auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
发表于 2020-05-08 15:43:26 回复(0)
Air张头像 Air张
这样的题目意义不大，使用技术视实际开发情况而定。
发表于 2019-03-17 22:42:07 回复(0)
laughing201804221855209头像 laughing201804221855209
好的
发表于 2019-03-06 21:37:26 回复(0)
齐冻冻头像 齐冻冻
方法一：
为父元素写相应的高度和宽度

方法二：
为父元素添加伪类元素
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

方法三：
在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可
发表于 2018-12-13 15:44:11 回复(0)
猿来头像 猿来
C
发表于 2018-08-04 21:10:59 回复(0)
life-river头像 life-river
煮酒论英雄就了90bv5nm
发表于 2018-04-01 14:11:18 回复(0)
Eos头像 Eos
SegmentFault 一起探索更多未知 应用内打开 首页 问答 专栏 讲堂 更多 CSS-清除浮动 css damonare 2016年04月04日发布 什么是CSS清除浮动？ 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 引用W3C的例子，news容器没有包围浮动的元素。 .news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div> ; 清除浮动方法 方法一：使用带clear属性的空元素 在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。 .news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clear { clear: both; } <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> <div class="clear"></div> </div> 优点：简单，代码少，浏览器兼容性好。 缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。 方法二：使用CSS的overflow属性 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。 .news { background-color: gray; border: solid 1px black; overflow: hidden; *zoom: 1; } .news img { float: left; } .news p { float: right; } <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div> 方法三：给浮动的元素的容器添加浮动 给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。 方法四：使用邻接元素处理 什么都不做，给浮动元素后面的元素添加clear属性。 .news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .content{ clear:both; } <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> <div class="content">***</div> </div> 注意这里的div.content有内容。 方法五：使用CSS的:after伪元素 结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。 给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。 .news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clearfix:after{ content: "020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* 触发 hasLayout */ zoom: 1; } <div class="news clearfix"> <img src="news-pic.jpg" /> <p>some text</p> </div> 通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。 总结 通过上面的例子，我们不难发现清除浮动的方法可以分成两类： 一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。 二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，关于这一点。 在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。 最后可以使用相对完美的:after伪元素方法清理浮动，文档结构更加清晰。 2016年04月04日发布 新浪微博微信TwitterFacebook••• 赞赏支持 赞 | 6 收藏 | 32 如果觉得我的文章对你有用，请随意赞赏已赞赏 你可能感兴趣的文章 前端之CSS基础学习 12 收藏，599 浏览 css盒子模型 1 收藏，673 浏览 CSS hack合集 15 收藏，586 浏览 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可 。 1 条评论默认排序时间排序 17番 · 2016年04月04日 收藏了 赞 回复 文明社会，理性评论 发布评论 关注作者 damonare damonare 1.7k 声望 发布于专栏 前端小渣 知乎专栏[前端进击者]简书专题[前端进击者] 38 人关注 关注专栏 Copyright © 2011-2018 SegmentFault. 当前呈现版本 17.06.16 浙ICP备 15005796号-2 浙公网安备 33010602002000号 杭州堆栈科技有限公司版权所有 CDN 存储服务由 又拍云 赞助提供 移动版 桌面版
发表于 2018-02-08 00:12:19 回复(2)
提交观点

问题信息

CSS
上传者：小小
难度：
23条回答 11652浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号