html高度塌陷

最新推荐文章于 2024-11-06 07:17:43 发布

沐影y_

最新推荐文章于 2024-11-06 07:17:43 发布

阅读量104

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/muying0302/article/details/128085905

版权

/* 一般情况下，我们不会给父元素设置指定的高度

都是让他被内容撑开的

如果我们给子元素设置浮动，子元素会脱离文档流，一旦元素脱离文档流了

子元素就不能再撑开父元素的高度了，导致父元素的高度丢失，而且会导致

我页面布局混乱，这就叫高度塌陷

如何解决：

1、给父元素设置固定高度,但这种方式不推荐使用

    <style type="text/css">
      .outer {
        border: 10px red solid;
        height: 100px;
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }

      .box3 {
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
    <div class="box3"></div>
  </body>
</html>

<!-- 解决高度塌陷方法二：

给元素开启隐含属性BFC（块级格式化上下文），一旦元素开启隐含属性BFC后

元素就具有一些独有的特点，这些特点可以解决一些问题，其中就包括高度塌陷

1、开启BFC后，元素具有哪些特点？

（1）、父子外边距就不会重叠了（解决父子外边距重叠的问题）

（2）、开启BFC的元素就不会被浮动元素所覆盖

（3）、开启BFC的元素可以包裹住浮动的元素（解决高度塌陷问题）

2、如何开启BFC属性

（1）、设置overflow样式，样式值只要是非visible

也就是说可以设置hideen，auto，scroll等

其中hideen是副作用最小（推荐使用）

（2）、设置元素浮动(不推荐)

确实可以解决父元素高度丢失的问题，但也会带来一些新问题，父元素也会脱离文档流，

页面布局依然会混乱，而且父元素的宽度也会丢失

（3）、将元素转成行内块元素(不推荐)

可以解决父元素高度丢失的问题，但也带来一些新问题，父元素的宽度丢失了，

而且三像素也出现

（4）、将元素设置绝对定位 position: absolute;(不推荐)

确实可以解决父元素高度丢失的问题，但也会带来一些新问题，父元素也会脱离文档流，

页面布局依然会混乱，而且父元素的宽度也会丢失

-->

   <style type="text/css">
      .outer {
        border: 10px red solid;
        /* height: 100px; */
        /* 开启BFC */
        /* overflow: scroll; */
        overflow: hidden;
        /* float: left; */
        /* display: inline-block; */
        position: absolute;
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }

      .box3 {
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
    <div class="box3"></div>
  </body>
</html>

清除浮动


    <style type="text/css">
      .box1 {
        width: 400px;
        height: 400px;
        background-color: yellow;
        float: left;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
        float: right;

      }
      /* 需求：不希望box1浮动对box3有影响，
         需求：不希望box2浮动对box3有影响 */
      .box3 {
        width: 300px;
        height: 300px;
        background-color: skyblue;
        /* 
         通过clear样式，消除浮动元素对下面元素的影响
            可选值
               left  消除左侧浮动对元素的影响
               right 消除右侧浮动对元素的影响
               both  消除两侧侧浮动对元素的影响，
                        其中哪一侧浮动带来的影响大，就清除谁
        */
        clear: both;
      }
    </style>
  </head>
  <body>
    <!-- 需求，设置box1左浮动，box2右浮动，而box3待在原地不动 -->
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
  </body>
</html>

<!-- 解决高度塌陷问题方法三：

在浮动子元素的下方设置一个空的块元素，

然后借助clear属性来消除浮动元素对空的块元素的浮动影响

缺点：在结构里面多了一个空的块元素

-->

<!--

解决高度塌陷方案三：

可以直接在高度塌陷的父元素的最后，添加一个空白的div，

由于这个div并没有浮动，所以他是可以撑开父元素的高度的，

然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，

基本没有副作用

使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

-->

    <style type="text/css">
      .box1 {
        border: 10px solid red;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
      .box3{
        height: 100px;
        background-color: yellow;
      }
      .box4{
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">box2</div>
      <!-- 空的块元素 -->
      <div class="box4"></div>
    </div>
    <div class="box3"></div>
  </body>
</html>

<!-- 解决高度塌陷问题的方法四：

结合伪类after以及clear来解决

通过伪类after，在元素的后面添加内容，将这个内容转成块元素，

再清楚其他浮动元素对这个块元素的浮动影响

一般情况下，我们会给这个写法单独设置一个类名，哪里需要解决高度塌陷问题

，就给对应的位置添加类名

这种方式

是最常用的解决高度塌陷问题的方法

-->

    <style type="text/css">
      .box1 {
        border: 10px solid red;
      }
      .clearfix::after{
        /* 添加的元素不会独占一行 */
        content: '';
        /* 将添加的元素转成块元素 */
        display: block;
        /* 清除浮动元素对空的块元素的影响 */
        clear: both;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="box1 clearfix">
      <div class="box2"></div>
    </div>
    <p class="p1 clearfix">
      <div class="p2"></div>
    </p>
  </body>
</html>

<!-- 
	  /*通过after伪类，选中box1的后边*/
/*	
	可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
	这样做和添加一个div的原理一样，可以达到一个相同的效果，
	而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
*/

      /*  解决高度塌陷方案三： */
      .box1:after {
        /*添加一个内容*/
        content: "";
        /*转换为一个块元素*/
        display: block;
        /*清除两侧的浮动*/
        clear: both;
      }
 -->