当前位置：网站首页>Today, I sorted out some problems about high collapse

Today, I sorted out some problems about high collapse

2022-07-25 22:27:00 【Start】

1. First of all, explain to you what is high collapse ？

Generally, the height of the parent element is not fixed , Spread out by content

Definition of height collapse ： Element set floating float Without the document flow, the height of the parent element cannot be expanded , Causes the height of the parent element to be lost , The layout is chaotic

2. Let's share my solutions

Solution 1 ：

1. Set the height of the parent element , Fix him , To settle temporarily —— Not recommended

shortcoming ： It's not easy to modify , Difficult to maintain

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <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>

Solution 2 ：

Turn on BFC, Block formatting context , After opening, the element becomes a separate area

BFC It can be understood as a closed big box , The elements in the box will not affect the elements outside

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .outer {
        border: 10px red solid;
        float: left;
        /* display: inline-block; */
        /* overflow: hidden; */
        /* position: absolute; */
      }

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

      .box3 {
        height: 100px;
        width: 150px;
        background-color: yellow;
        float: left;
      }
      .box {
        width: 400px;
        height: 400px;
        background-color: aquamarine;
        /* overflow: hidden; */
        /* float: left; */
        /* display: inline-block; */
        /* position: absolute; */
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
    <div class="box3"></div>
    <!-- <div class="box">
      <div class="box1"></div>
    </div> -->
  </body>
</html>

Turn on BFC The characteristics of the latter element ：

1. The vertical outer border of the parent element will not coincide with the child element （ Parent child elements overlap ）

2. Turn on BFC Is not overwritten by floating elements

3. Turn on BFC Patterns can contain floating child elements

Turn on BFC The way ：

1.dispaly:inline-block, Lost width

2. Set float , Who needs who drives , Lost width

3.overflow:

visible The default value is （ Except for him ）

hidden The content will be trimmed , And the rest is invisible

scroll The content will be trimmed , But the browser will display scroll bars to see the rest of the content

auto If the content is trimmed , The browser will display scroll bars to view the rest of the content

inherit Rules should be inherited from the parent element overflow The value of the property

4. location , Lost width

Recommend ways ： take overflow Set to hidden It is the opening with the least side effects BFC The way .

Solution 3 to high collapse ：

It can be directly at the end of the highly collapsed parent element , Add a blank div,

Because of this div No floating , So it can expand the height of the parent element ,

Then float it after it is cleared , This can be done through this blank div To expand the height of the parent element ,

Basically no side effects

Although this method can solve the problem , But extra structure will be added to the page .

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        border: 10px solid red;
      }

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

Solution 4 for height collapse ：

adopt after pseudo-classes , Choose box1 Behind

Can pass after The pseudo class adds a blank block element to the end of the element , Then clear the float ,

Do this and add a div The principle is the same , Can achieve the same effect ,

And no extra... Will be added to the page div, This is our most recommended method , Almost no side effects

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        border: 10px solid red;
      }

      .qq::after{
        content: '';
        display: block;
        clear: both;
      }

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

原网站

版权声明
本文为[Start]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190520302872.html