高度塌陷问题以及如何解决高度坍塌问题

      我们在进行页面布局的时候可以发现元素在脱离文档流后,就会出现高度塌陷问题。

一、什么是高度塌陷?

通过下面的例子了解什么是高度塌陷。

在页面中设置一个盒子box,其中在嵌套一个子元素小盒子box1。box设置边框宽度,而高度不去设置高度会由内容撑开

但是当我们向盒子里面添加内容的时候<div class="box1">a</div>,就可以发现父元素被撑开了。

在文档流定位中父元素的高度默认是被子元素撑开的高度。即子元素的高度就是父元素的高度

当为父元素中的子元素设置了向浮动时。比如说为box1设置向左浮动。就会发现子元素的位置没变,但是父元素box发生了高度坍塌。

得出结论当为子元素设置浮动的时候,子元素就会完全脱离文档流,此时将会导致子元素无法撑开父元素,导致父元素的高度塌陷

当再在父元素之下设置一个盒子box2,为box2设置高度80px和背景颜色。

按理来说正常情况下,按照文档流排列,会是box的边框包裹着box1,box2在二者下方,如图一所示。

为box1设置浮动定位后,box1会脱离文档流,如上所示父元素随即会出现高度塌。这时候,box2盒子也会向上移动,造成布局混乱。如图二所示。

高度塌陷所造成的后果:由于父元素的高度塌陷,就会导致父元素之下的所有元素都会因此而向上移动,这样会导致页面混乱。不利于页面布局

                      



高度塌陷问题以及如何解决高度坍塌问题

原文地址:https://www.cnblogs.com/nyw1983/p/11374358.html

时间: 2024-11-13 03:51:44

高度塌陷问题以及如何解决高度坍塌问题的相关文章

高度塌陷的四种解决办法

<!doctype html> <html> <head> <meta charset="utf-8"> <title>高度塌陷问题</title> <style type="text/css"> body,div,p,ul,ol,li,dl,dt,dd,form,table,tr,td,hr,h1,h2,h3,h4,h5,h6,fieldset,img,input{ margin:

如何解决高度塌陷

hello 朋友们,我又来了哦!对的没错,今天的话题呢就是高度塌陷. 首先要知道什么是高度塌陷.高度塌陷其实就是指当父元素没有给确定的高度(即父元素高度靠子元素撑起来),并且子元素添加了浮动时,内容无法撑起父元素的高度,即父元素发生高度塌陷. 解决办法: 第一种,开启元素的BFC,元素将会具有如下的特性: 1.父元素的垂直外边距不会和子元素重叠 2.开启BFC的元素不会被浮动元素所覆盖 3.开启BFC的元素可以包含浮动的子元素 开启元素BFC属性的方式: 一.给父元素添加声明,清除浮动 over

css float父元素高度塌陷

css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float 父元素高度消失/塌陷的问题 .clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;} .clearfix {*zoom:1} 更好的方法是 .clearfix:after{content:'';dis

解决高度坍塌问题(二)

我们了解完高度坍塌问题之后,那么如何去解决高度坍塌问题呢? 解决高度问题的方法一: 解决问题的原理:根据W3C标准,元素都有一个隐含的属性(Block Formatting Context)简称BFC,块级格式化环境,该属性可以设置打开或是关闭,当开启BFC后,元素将会具有如下特性: 1.父元素的垂直外边距不会和子元素重叠. 2.开启BFC的元素不会被浮动元素覆盖. 3.开启BFC的元素可以包含浮动的子元素. 方案一:直接为父元素指定高度,假设子元素是200px,那么就为父元素的高度也设置为20

overflow:解决 div的高度塌陷问题

高度塌陷是如何引起的? 解析: 当一个 div中所有的子  div都进行了浮动后,那么会出现该问题,那么解决方就是在父 div中 设置其  overflow:hidden;即可解决高度塌陷问题. 方式二:在父 div结束标签前添加一个子的  div,给该 div设置一个 id,然后通过样式清除浮动.代码如下: #littlediv{clear:left;} //左侧不允许浮动 或者是 #littlediv{clear:both;} //清除左右两侧浮动元素

解决父级元素高度塌陷问题的方法

如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候.那么它的高度就会塌缩为零,也就是所谓的“高度塌陷”,如果父级元素包含背景或者边框,那么溢出的元素就不像父级元素的一部分了.解决“高度塌陷”的问题很简单: 1.浮动父级元素 如果让父级元素浮动,父级元素的高度就会扩大,直到完全包含它里面的浮动元素,虽然这个方法很奇怪,但是很有效.如果选择这种方法,一定要在该元素的下个元素添加clear:both,确保浮动元素落到父级元素的下方. 2.利用overflow:hidden,zoom:1 { ov

父元素高度塌陷的解决办法

很多时候子元素浮动的,会造成父元素塌陷 解决方法 1.添加一个空元素,并设置成清除浮动,即: <div style="clear:both;"></div> 优点:通俗易懂,易于掌握 缺点:添加了无意义标签,不易于后期维护,违背了结构和表现的标准 2.给父元素添加 overflow:auto; 3.给父元素也浮动 缺点:影响整体页面布局,若父元素也有父元素呢? 4.使用after伪元素 给父元素添加一个类,即看不见的清除浮动的元素 .clearfix:after

如何解决高度坍塌问题?——BFC模式

来源:那些年我们一起清除的浮动 CSS|Float知多少   学习块格式化上下文 问题引起是2016IFE春季问题的任务三,总的父元素parent包含三个浮动的子元素,容器的高度不能自动伸长以适应内容的高度,出现了高度坍塌问题. 代码如下: <div class="parent"> <div class="left"></div> <div class="center"></div> &

float浮动造成高度塌陷的解决办法

Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素都浮动了的话,父元素就“瘪”了. 就像下面这样 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">