如何解决高度塌陷

  hello 朋友们,我又来了哦!对的没错,今天的话题呢就是高度塌陷。

  首先要知道什么是高度塌陷。高度塌陷其实就是指当父元素没有给确定的高度(即父元素高度靠子元素撑起来),并且子元素添加了浮动时,内容无法撑起父元素的高度,即父元素发生高度塌陷。

  解决办法:

    第一种,开启元素的BFC,元素将会具有如下的特性:
          1.父元素的垂直外边距不会和子元素重叠
          2.开启BFC的元素不会被浮动元素所覆盖
          3.开启BFC的元素可以包含浮动的子元素

开启元素BFC属性的方式:
 一、给父元素添加声明,清除浮动   overflow:hidden;  但这种方式会父元素的宽度丢失,而且使用这种方式也会导致下边的元素上移,会造成其他的结构问题所以一般不建议采用。
 二、设置元素定位

 三、设置元素为 display:inline-block;也可以解决问题,但是会导致宽度丢失,也不推荐使用这种方式 

    第二种,在浮动的子元素后面添加一个空的 div,并给该这个 div 元素加样式:

23              *     由于这个div并没有浮动,所以他是可以撑开父元素的高度的,
24              *     然后在对其进行清除浮动,这样可以通过这个空白的div来撑开父元素的高度,
25              *     基本没有副作用
      .boxWrap .con{          clear: both; height: 0; overflow: hidden;

        }

      <div class="boxWrap">

          <p></p>

          <p></p>

          <p></p>

          <p></p>

          <div class="con"></div>

      </div>

    第三种,万能清除浮动法:

      .boxWrap:after{

            content:".";

            display: block;

            clear: both;

            height: 0;

            overflow: hidden;

            visibility: hidden;

        }

      <div class="boxWrap">

          <p></p>

          <p></p>

          <p></p>

          <p></p>

      </div>

  这个方法是目前最好的解决方法,解决问题的同时,也不会带来新的问题,更不会扰乱父元素的结构与样式,因此是最推荐使用的一种方法。

OK,到这里,解决高度塌陷的方法已经介绍完了,如果你还有其他好的方法的话,欢迎一起来交流哦!

原文地址:https://www.cnblogs.com/momeak/p/10992950.html

时间: 2024-10-27 06:22:32

如何解决高度塌陷的相关文章

解决高度塌陷的方法

我们在进行页面布局的时候可以发现元素在脱离文档流后,就会出现高度塌陷问题. 众所周知高度塌陷的原因是因为子元素脱离文档流所造成的父元素塌陷(所谓的高度塌陷就是子元素和父元素不在一个层级,未设置高宽的父元素里面没有子元素的支撑就会塌陷)会影响页面布局和美观性. 以下提出几点解决方案 首先我们先引出一个概念:Block Fomatting Context,我们称为块格式化上下文 简称BFC,这是每个元素都具有的一个属性! 开启BFC的元素都有以下特点: 1.开启了BFC的元素与其父元素的垂直外边距不

解决高度塌陷-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

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

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

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

高度塌陷的产生条件和解决方法

高度塌陷产生的原因: 高度塌陷: 当所有的子元素浮动的时候,且父元素没有设置高度,这时候父元素就会产生高度塌陷. 例如: .father{ width: 600px; /* 给父元素一个宽度 */ background-color: #008000; /* 给个背景颜色 */ } .child_1{ width: 200px; height: 200px; background-color: #00FFFF; float: left; /* 子元素浮动 */ } .child_2{ width:

高度塌陷问题的解决方案

高度塌陷问题是前端新人在布局中遇到的头疼问题,然而,解决这个问题之前,我们需要先明白高度塌陷问题产生的原因. 我们知道,一个块元素在没有设置宽和高的情况下,宽度默认占满父元素全部,而高度默认被子元素撑开,如图A1父元素 没有设置宽高,而其高度被子元素a1撑开为200px,宽度默认是body的宽度,如图. 而高度塌陷问题的产生,源于子元素的浮动,而浮动,则是会脱离文档流,脱离文档流,意味着脱离常规网页布局,其他盒子在布局时会忽略浮动盒子的影响,而浮动的盒子也会默认上升一个层级,如图,在这里我设置了

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

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