解决高度塌陷的方法

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

众所周知高度塌陷的原因是因为子元素脱离文档流所造成的父元素塌陷(所谓的高度塌陷就是子元素和父元素不在一个层级,未设置高宽的父元素里面没有子元素的支撑就会塌陷)会影响页面布局和美观性。

以下提出几点解决方案

首先我们先引出一个概念:Block Fomatting Context,我们称为块格式化上下文 简称BFC,这是每个元素都具有的一个属性!

开启BFC的元素都有以下特点:

1.开启了BFC的元素与其父元素的垂直外边距不会发生重叠

2.开启了BFC的元素会包含其浮动的子元素*

3.开启了BFC的元素不会被浮动元素所覆盖

那么如何开启BFC呢?

1.display:inline-block

-这种方式虽然能够撑开父元素,且下面元素布局不会受到影响,但是会使父元素宽度丢失。

2.设置元素浮动

-这种方式虽然能够撑开父元素,但会使父元素宽度丢失,且下面所有元素的布局也会向上挪动,影响布局

3.overflow:hidden

-副作用最小的开启BFC的方式

4.overflow在ie浏览器里面会失效有一个兼容问题可以使用zoom来带替。zoom后面的值是几意思就是将元素放大几倍!适用于ie8以下的浏览器

原文地址:https://www.cnblogs.com/niuyaomin/p/11515014.html

时间: 2024-10-11 07:34:10

解决高度塌陷的方法的相关文章

如何解决高度塌陷

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

关于高度塌陷问题解决方法

如果父元素只包含浮动元素,且父元素未设置高度和宽度,那么它的高度就会塌缩为零,也就是所谓的“高度塌陷”. 如果父级元素包含背景或者边框,那么溢出的元素就不像父级元素的一部分了. 解决“高度塌陷”问题的方法: 1.浮动父级元素,父级元素的高度就会扩大,直到完全包含它里面的浮动元素.如果使用这种方法,一定要在该元素的 下个元素添加clear:both,确保浮动元素落到父级元素的下方. 2.使用overflow:hidden,zoom:1 .overflow:hidden属性会强制父级元素扩大到包含浮

防止高度塌陷的方法

浮动元素父元素高度自适应(高度塌陷) hack1:给父元素添加声明overflow:hidden; hack2:   给父元素加height hack3:   在浮动元素下方添加空div,并给该元素添加         声明:div{clear:both; height:0; overflow:hidden;} hack4:万能清除浮动法 p:after{content:".";clear:both;display:block;height:0;overflow:hidden;  vi

解决高度塌陷-CSS

1:给高度塌陷的元素设置overflow:hidden; 原理:因为overflow:hidden;触发了一个BFC BFC布局规则:计算BFC高度的时候,里面的浮动元素也参与计算. 弊端:定位在当前元素外面的内容会被隐藏. 2:给出现高度塌陷的元素里面,放在浮动元素的后面,添加一个空div,并且给div{clear:both;} 原理:clear:both;忽略上面的浮动元素预留出的空间 弊端:形成不必要的空标签,代码冗余 3:万能清除法: 选择符(高度塌陷的元素):after{ conten

padding-top:100%解决高度塌陷问题

<div class="img_box"> <img src="http://sms-shop.oss-cnbeijing.aliyuncs.com/${item.bannerpic.split(',')[0]}"/> </div> .img_box { position: relative; width: 90%; padding-bottom: 100%; } .img_box img { position: absolute

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

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

关于float高度塌陷问题

和所有刚入门的菜鸟一样,我发现float有高度塌陷问题,又很偶然的发现float元素后加<img/>能消除float带来的破坏性. 后来百度了一下,大部分的float高度塌陷问题都没有提及img带来的影响. 解决高度塌陷问题方法: 1.在最后一个元素后加入<div style="clear:both"> 2.father-div设置高度 3.父元素加上after伪元素: 其中第三种方法的效果是最好的,和<img/>差不多,不过好像还是after比较优

解决高度坍塌问题(二)

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

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

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