div为空的时候 浮动没有效果_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 月编程语言排行榜前端开发与架构师微信又升级!这个功能被“玩坏”,网友笑抽了...
喜欢本文的朋友们,欢迎长按下图关注订阅号前端技术精选
收看更多精彩内容
你在看吗?一起成长
div为空的时候 浮动没有效果_3种CSS清除浮动的方法相关推荐
- css为什么要用浮动_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达 作者:html中文网 | 编辑:前端妹 来源:html.cn/web/css/19613.htm ...
- CSS清除浮动大全共8种方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
- css清除浮动float的三种方法总结
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"><div class="div ...
- [css] 清除浮动的方式有哪些及优缺点?
[css] 清除浮动的方式有哪些及优缺点? 什么是盒子塌陷? 外部盒子本应该包裹住内部的浮动盒子,结果却没有.问题出现的原因 父元素只包含浮动元素,那么它的高度就会塌缩为零(前提就是你们没有设置高度( ...
- 一、css清除浮动方法学习笔记总结(超详细,简单易懂)
** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co ...
- css清除浮动大全,共8种方法。
本文转载自:http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果 ...
- html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2: #test{display:block;zoom:1;overflow ...
- css清除浮动无效,css清除浮动的处理方法
根据<精彩绝伦的css> JS Bin .news{ outline:1px solid pink } .col{ float: left; width:33%; outline:1px ...
- CSS清除浮动的几种方法
来源 | https://www.html.cn/web/css/19613.html 今天这篇文章给大家介绍一下CSS清除浮动的几种方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮 ...
最新文章
- OpenCV中常用到的轮廓处理函数汇总
- SQL语句导入导出大全
- oracle 文件写 n r,文本模式读写文件中\r和\n的问题
- sort(()={return Math.random()-0.5)}乱序数组不准确
- PinSAGE有伴了! 快速了解PinnerSAGE模型
- 视觉平台搭建——光源选择
- 华为交换机修改主机名
- phpexcel读取输出操作
- c++ strcmp函数
- Java设计模式pdf
- C++ 一维高斯积分的实现
- 前后端分离的时代,团队间的完美协作
- NR 5G: Relaxed measurement
- raid卡缓存对硬盘性能_服务器RAID配置方法大全
- 45台计算机的网络拓扑图,网络复习习题
- C#基础教程-c#实例教程,适合初学者
- myeclipse 6.5注册码
- CMW500 Bluetooth信令测试
- 计算机专业先考研先上班,如何准备考研工作?
- 蓝懿学习之 疯狂阶段
热门文章
- windows2003安全设置
- Cacti Plugin Architecture安装
- ***站长自述挂马经历 提醒挂马者回头是岸
- rabbitmq接口异常函数方法_RabbitMQ监控(三):监控队列状态
- 计算机统计知识,计算机知识在统计工作中的重要性
- python中的常量是什么意思_第14p,Python中的常量与注释。
- iconsvg image怎么变为path_昆凌是怎么收服天王周杰伦的?这几招太高明了
- 从源码到可执行程序的步骤
- PHP+Ajax点击加载更多列表数据实例
- 查看端口是否被占用,以及端口的应用名称