css为什么要用浮动_3种CSS清除浮动的方法

点击上方 "前端技术精选" 关注，星标或者置顶

12点00分准时推送，第一时间送达

作者：html中文网 | 编辑：前端妹

来源：html.cn/web/css/19613.html

前端技术精选(ID：FrontEndTech)第 55 次推文图源：百度上一篇：16个非常有用的CSS伪选择器，你千万不要错过了！

往期最热：

1、万字长文！if我是前端团队Leader，怎么制定前端协作规范？

2、Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5

3、高阶函数不会用？教你JS中最实用最牛掰的几个高阶函数用法

4、2020年大前端发展趋势

5、美团旅行前端技术体系的思考与实践

6、技巧：CSS实现一个粒子动效的按钮

7、腾讯高级工程师：未来可期的TypeScript

正文

今天这篇文章给大家介绍3种CSS清除浮动的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

首先，这里就不讲为什么我们要清楚浮动，反正不清除浮动事多多。下面我就讲3种常用清除浮动的方法，够用了。1、在浮动元素后面加一个空的div，并为它清除浮动html代码：

class="wrap">

class="float">浮动

class="clear">

class="nofloat">不想被浮动影响

css代码：

.wrap{  width:500px;  height:400px;  border:1px solid red;  margin:0 auto;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}.nofloat{    width:300px;    height:150px;    background:red;}

现在虽然加了一个空的div，但是并没有给它清除浮动，所以目前的效果就是第三个子元素.nofloat还是收到浮动的影响。

OK，现在给.clear加上清除浮动：

.clear{    clear:both;}

刷新一下效果就出来了：

PS：这种情况比较适合元素之间是垂直排列布局的，为了不受彼此浮动的影响。2、利用BFC特性清除浮动html代码：

class="wrap">

class="float">浮动

class="nofloat">不想被浮动影响

css代码：

.wrap{  width:500px;  border:1px solid red;  margin:0 auto;  overflow:hidden;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}.nofloat{    width:300px;    height:150px;    background:red;    overflow:hidden;}

效果是这样的：

这里父容器是没有设置固定高度的，本来第一个子元素浮动之后，父元素的高度会塌陷到跟第二个子元素一样高，但由于这里分别给第二个子元素和父元素都设置了overflow:hidden ，所以它们都生成了一个新的BFC区域，根据上文提供的BFC布局规则可以得知：BFC区域不会与float box 重叠；计算BFC高度时浮动元素的高度也参与计算。所以就得到清除浮动的效果。说得比较绕，但其实清除浮动得根据自己开发中的实际情况合理使用。3、使用：after伪元素，给浮动元素的父元素清除浮动html代码：

class="wrap"> <div class="float">浮动div></div>css代码：

.wrap{  width:500px;  border:1px solid red;  margin:0 auto;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}

此时子元素浮动了，脱离了文档流，所以父元素高度酒塌陷了：

可以看到父元素的边框挤在一起了。OK，现在给父元素添加一个clearfix类：

class="wrap clearfix"> <div class="float">浮动div></div>

.clearfix{    *zoom:1;}.clearfix:after{    content:'clear';    display:block;    height:0;    clear:both;    overflow:hidden;    visibility:hidden;}

现在刷新后的效果就是：

这种方法和BFC清除浮动个人用的比较多，实际开发中，其实这两种就够用了。好的，清除浮动我也就简单地提到这里！以上就是CSS清除浮动的几种方法的详细内容。如果有什么错误的话，欢迎留言指正。

前端妹拍了拍你说：

记得戳小花花哦~

历史回顾：JavaScript常用API合集汇总三年 Git 使用心得 & 常见问题整理字节跳动禁止中国员工访问海外代码库；新Mac或使用苹果自研芯片；微软公布Windows Terminal 2.0路线图何时使用TypeScript：常见场景的详细介绍纯CSS打造银色MacBook Air(完整版)2020 年 6 月编程语言排行榜前端开发与架构师微信又升级!这个功能被“玩坏”,网友笑抽了...

喜欢本文的朋友们，欢迎长按下图关注订阅号前端技术精选

收看更多精彩内容

你在看吗？一起成长

css为什么要用浮动_3种CSS清除浮动的方法相关推荐

div为空的时候浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
0基础快速入门CSS技术栈（6）—图解详细阐述说透CSS的浮动及应用、浮动的扩展及清除浮动和详解快速·1photoshop切图（附详细案例源码解析过程）2021-01-07更新
文章目录 1. 浮动(float)重点提炼 2. CSS 布局的三种机制 3. 为什么需要浮动? 3.1 example01 4. 什么是浮动(float) 4.1 作用 4.1.1 example0 ...
CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...
清除浮动-双伪元素清除浮动（HTML、CSS）
清除浮动-双伪元素清除浮动(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta c ...
浮动的概念作用特点产生浮动的原因和清除浮动的方法
一.浮动的概念: 什么是浮动(float)? 概念:元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置. 浮动float,CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通 ...
html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...
html的水平居中怎么设置,css水平居中怎么设置？两种css水平居中的设置方法
css样式能够实现水平居中,那么css水平居中怎么设置呢?本篇文章将给大家来分享关于css设置水平居中的实现方法. css中可以设置行内元素的水平居中和设置块级元素的水平居中,对于行内元素和块级元素不 ...
浮动(Floats)原理与清除浮动
浮动概念浮动元素会脱离文档的普通流,根据float的值向左或向右移动,直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块级元素表现得就 ...
什么是浮动、为什么要清除浮动
什么是浮动在了解什么是浮动之前我们先了解一下html元素在普通流排列方式.在普通流中,元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的,在排列过程中所有的行内元素水平排列,直到当行 ...

css为什么要用浮动_3种CSS清除浮动的方法

css为什么要用浮动_3种CSS清除浮动的方法相关推荐

最新文章

热门文章