flow布局(详解为什么设置overflow为hidden可以清除浮动带来的影响)
flow布局
详解为什么设置overflow为hidden可以清除浮动带来的影响1.问题起源
在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了。使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动的方法,最常用的就是设置父元素的overflow:hidden这个属性,每次在写代码的时候总是这样写,但是,自己从没深度思考过这些写为什么能够清除浮动,最近,自己也查阅了一些资料,谈谈自己的理解。
2.情景再现
先上代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style> .container{ border: 1px solid #000; background: #0f0; } .child{ float: left; } </style> </head> <body> <li class="container"> <li class="child"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam dolorem eligendi laudantium libero magnam magni numquam voluptas voluptatem voluptatibus? Consequuntur delectus dolorem esse explicabo minus neque non quaerat voluptatum! </li> </li> </body> </html>
代码很简单,就是父元素container里面包含了一个子li元素child,然后我们使子元素的li向左浮动,页面展示效果如下:
结果来看,父元素只显示了四个方向边框的高度,背景颜色未显示,这是因为子元素浮动脱离文档流造成父元素高度塌陷。
3.解决方法
.container{ border: 1px solid #000; background: #0f0; overflow: hidden; }
只在container父元素加了一行overflow:hidden
页面展示效果如下:
父元素高度被撑起来了,背景颜色也显示出来了。
4.BFC概念
我们先了解一个名词:BFC(block formatting context),中文为“块级格式化上下文”。
先记住一个原则: 如果一个元素具有BFC,那么内部元素再怎么翻江倒海,翻云覆雨,都不会影响外面的元素。所以,BFC元素是不可能发生margin重叠的,因为margin重叠会影响外面的元素的;BFC元素也可以用来清楚浮动带来的影响,因为如果不清楚,子元素浮动则会造成父元素高度塌陷,必然会影响后面元素的布局和定位,这显然有违BFC元素的子元素不会影响外部元素的设定。
以下情况会触发BFC:
- <html>根元素
- float的值不为none
- overflow的值为auto,scroll,hidden
- display的值为table-cell,table-caption和inline--block中的任何一个
- position的值不为relative和static
显然我们在设置overflow值为hidden时使container元素具有BFC,那么子元素child浮动便不会带来父元素的高度坍塌影响。
5.总结
设置overflow为hidden使元素具有BFC而不会受子元素的影响,但是当子元素过多需要滚动显示时,我们可以设置overflow的值为auto或acroll,超出父元素之外的元素会被隐藏。使用overflo:hidden也具有一定的局限性,所以我们应该根据具体的业务场景来选择合适的方法。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
- css浮动布局和盒子(css 盒模型 文档流 几种清除浮动的方法实例详解)
- 可以清除浮动影响的方法是(常用的清除浮动的方法)
- css用clearfix清除浮动
- css如何去掉本身的浮动元素(CSS清除浮动的常用方法优缺点分析)
- html5清除浮动的方法(HTML5实现移动端点击翻牌功能)
- clear清理指令(详解利用clear清除浮动的一些问题解决)
- css中浮动的方式有几种方式(浅谈css中浮动和清除浮动带来的影响)
- css清除浮动
- margin属性设置4个参数(解决margin塌陷与margin合并margin清除浮动问题)
- flow布局(详解为什么设置overflow为hidden可以清除浮动带来的影响)
- 如何清除浮动元素带来的影响(关于清除浮动塌陷的几种方法总结)
- 鲢鳙钓底还是钓浮 流水的水域应怎样做钓(鲢鳙钓底还是钓浮)
- 入秋后的第二场苹果发布会来了 全新M1系列芯片登场(入秋后的第二场苹果发布会来了)
- 苹果正式发布自研芯片M1 5nm 32核心 彻底放弃Intel(苹果正式发布自研芯片M1)
- 苹果自研芯片跑分对比 A16芯片排名靠后,M1系列霸榜(苹果自研芯片跑分对比)
- X86处理器的梦魇 苹果M1自研芯片到底有多强(苹果M1自研芯片到底有多强)
- 泰剧《爱欲之神》Boom kitkong和Great合体杂志(泰剧爱欲之神Boomkitkong和Great合体杂志)
热门推荐
- mysql从入门到实践万字详解(mysql基础知识扫盲)
- nginx tomcat集群(Nginx+tomcat负载均衡集群的实现方法)
- 纯css写三角形(老生常谈 使用 CSS 实现三角形的技巧多种方法)
- mysql里修改密码命令(MySQL修改账号密码方法大全小结)
- mysql为啥使用b+树(MySQL用B+树作为索引结构有什么好处)
- css快速开发(纯 CSS 撸一个漂亮的加载)
- snmp配置实例(SNMP4J服务端连接超时问题解决方案)
- vmware16虚拟机的安装教程(最新虚拟机VMware 14安装教程)
- pip默认镜像怎么设置(将pip源更换到国内镜像的详细步骤)
- mysql字段和关键字(mySQL之关键字的执行优先级讲解)