Float application

A floating box can move left or right until its outer edge touches the outer edge of the containing block or touches the outer edge of another floating box. Floating boxes also deviate from the regular document flow, so other block-level boxes in the regular document flow behave almost as if the floating box did not exist at all.

In general, floating elements leave the document flow, and we assume that elements that leave the document flow do not affect other elements in the same way that non-floating elements do. However, since float is used to create the effect of text wrapping around an image in a web page, strictly speaking, when a row box encounters a floating element, the floating element is left blank, creating the effect of text wrapping around the floating box, which is why “almost” was used above.

Floating can cause box height collapse. See box collapse section for solutions. The purpose of this section is to use float to implement two typical layouts:

PC side three column layout, the middle (main content) column first render.
The width of both sides is fixed and the middle is adaptive.

1. Layout of the Holy Cup

<style>
  .container {
      background-color: #ddd;
      padding: 0 200px; /* Prevent center content from being overwritten on both sides; the padding is set to the width of both sides */
      font-size: 40px;
  }
  .left {
      position: relative; /* Place the left element in the padding-left position */
      width: 200px;
      height: 200px;
      margin-left: -100%; /* -100% of the parent element's content, moves the left element to the far left */
      right: 200px;  /* Place the left element in the padding-left position */
      background-color: tomato;
  }
  .right {
      width: 200px;
      height: 200px;
      margin-right: -200px;  /* is set to its width and is a negative value. The padding-right element moves to the left, and the right element moves to the previous line */
      background-color: thistle;
  }
  .center {
      width: 100%;
      height: 200px;
      background-color: turquoise;
  }
  .fl {
      float: left;
  }
  .clearfix::after {
      content: "";
      display: table;
      clear: both;
  }
  /* To be compatible with earlier versions of IE, add the following code */
  /* .clearfix { *zoom: 1; } * /
</style>
<body>
    <div class="container clearfix">
      <div class="center fl">center</div><! In order for the Center box to render first, the center box is placed in the first place of the three boxes.
      <div class="left fl">left</div>
      <div class="right fl">right</div>
    </div>
</body>
Copy the code

Two, double wing layout

<style>
        .fl {
            float: left;
        }
        body {
            font-size: 40px;
            min-width: 500px;
            background-color: #ddd;
        }
        .left {
            width: 200px;
            height: 200px;
            background-color: tomato;
            margin-left: -100%;
        }
        .right {
            width: 200px;
            height: 200px;
            background-color: thistle;
            margin-left: -200px; /* Right box set margin-left: -200px; It is different from the Holy Grail layout because the margin of the Holy Grail layout is placed in the same outer box and the Center of the Holy Grail layout is left blank by the padding of the parent element, while the center of the twin wing layout is left blank by the margin of the */
        }
        .center {
            width: 100%;
            height: 200px;
            background-color: turquoise;
        }
        .c-inner {
            margin: 0 200px;
        }
</style>
<body>
    <div class="fl center">
      <div class="c-inner">center</div>
    </div>
    <div class="fl left">left</div>
    <div class="fl right">right</div>
</body>
Copy the code

Here’s a quick look at how float can be used other than text wrap. A detailed summary of the layout will follow.

Box collapse

Margin overlap (collapse) and float collapse have been discussed, but there are no detailed solutions to this problem. Therefore, this paper mainly summarizes the causes of collapse and corresponding solutions in detail.

What is it

Box collapses are generally caused by block elements, and there are two main types.

HTML elements are arranged according to the box model, and box collapse can occur in browser rendering:

The first type: box height collapse;

The second category:marginCaused by the use of.

However, generally speaking, when the box collapse problem is mentioned in the interview, it is usually referred to as the box height collapse caused by floating.

Two, collapse reasons

1) Reasons for box height collapse

First of all, the general premise of box height collapse is that the height of elements is determined by the following two conditions:

The current element is setheightAttribute, then the height of the element is determined byheightDecision;
If the current element is not setheight, then the height of the element is changed fromThere are no internal elements that are detached from the document flowThe sum of the heights of.

Thus, it can be concluded that the necessary conditions for the occurrence of box height collapse are:

The current parent element has no correspondingheight ；
And the inner child element is separated from the document flow, resulting in no inner element to hold the current parent element:
- The float used by the inner child causes the inner element to leave the document flow, and the element that leaves the document flow cannot support the current parent element.
- The inner child element uses either absolute positioning or fixed positioning out of the document flow.

2)`margin`Collapse reason

Mainly due to the longitudinal overlap of margin:

Parent-child box elementmargin-top / margin-bottomOverlap (collapse).
Brother box element collapse: Box ofmargin-topWith another box ofmargin-bottomOverlap.

Three, how to solve

1) Solve the height collapse of the box

The simplest, direct, and brutal method is to set a fixed height for each box until it is appropriate. The advantages of this method are simple and convenient, good compatibility, suitable for changing only a small amount of content does not involve the layout of the box. The disadvantage is non-adaptive, and the browser window size directly affects the user experience.
Add a child element to the parent element that does not leave the document flow. The downside is that you add unnecessary DOM elements.
Resolve height collapse caused by floating:
- Adding a float to the external parent box to separate it from the standard document flow is convenient, but not very friendly to the layout of the page and difficult to maintain.
- Triggers the parent elementBFC, for example, add to the parent boxoverflowProperties. butoverflow:auto; There may be a scroll bar, affecting the appearance.overflow:hidden;This may cause problems with content not being visible. As shown in theBFCPart of the summary.
- Set outer box to non-block structure, set toinline-block. The disadvantage is that it may affect the layout of other elements of the document.
- usingclearAttribute closed float:
If you want additional float or Clearing float on this.

Clear float means to use the clear attribute to clear the impact of float on “I (the element currently using the clear attribute)”. Closed float means to close the internal float element and reduce the impact of float (usually height collapse). The following two pieces of code should make it easier to understand. In other words, a closed float is a better solution.

   <! -- 1. Clear float -->
   <style>
         .container {
           border: 4px solid brown;
         }
         .wrap {
           border: 2px solid blueviolet;
         }
         .main {
           float: left;
           width: 100px;
           height: 100px;
           background-color: aqua;
         }
         .footer {
           clear: both;
         }
   </style>
   <body>
       <div class="container">
         <div class="wrap">
           <div class="main">main</div>
         </div>
         <div class="footer">footer</div>
       </div>
   </body>
Copy the code

   <! -- 2. Closed float -->
   <style>
         .container {
           border: 4px solid brown;
         }
         .wrap {
           border: 2px solid blueviolet;
         }
         .main {
           float: left;
           width: 100px;
           height: 100px;
           background-color: aqua;
         }
         .clearfix:after {
           content: "."; /* Try not to write empty, generally write a dot, empty may cause a gap */
           height: 0; /* Box height is 0, not visible */
           display: block; /* Insert pseudoelements are inline elements to be converted to block-level elements */
           visibility: hidden; /*content has content, hide the element */
           clear: both; /* Clear float */
         }
   
         .clearfix {
           *zoom: 1; /* * Only IE6,7 recognition, hasLayout enabled, compatible with IE6,7 */
         }
   </style>
   <body>
       <div class="container">
         <div class="wrap clearfix">
           <div class="main">main</div>
         </div>
         <div class="footer">footer</div>
       </div>
   </body>
   
   <! Clear floats only work on elements currently using clear:both, while closed floats eliminate/close float elements.
Copy the code

In addition to the closed float element scheme used above, there is the following:

   .clearfix:before, .clearfix:after {
   	content: "";
   	display: table;
   }
   .clearfix:after {
   	clear: both;
   }
   .clearfix {
   	*zoom: 1;
   }   
Copy the code

The height collapse caused by positioning can only be solved by means 1 and 2, but it is generally unnecessary to consider this situation. This is because the positioning is generally what we want it to be (out of the document flow, with no impact on other elements at all), and not as uncontrollable as floating might be.

2) solve`margin`collapse

Parent-child box elementmargin-top / margin-bottomOverlap (collapse) : when you give a child element margin-top that is close to the parent element’s content area, the parent element also moves down, which is equivalent to setting the child elementmargin-topThat’s equal to setting the parent elementmargin-top ，margin-bottomSo, too. The solution is as follows:

   <style>
         /* Resolve margin-top/margin-botom collapse: 1. Sets a top/bottom border for the parent element. 3. Enable BFC for the parent element, for example, display: flow-root. * /
         .container {
           background-color: chartreuse;
           width: 100px;
           height: 100px;
           /* border-top: 1px solid white; * /
           /* padding-top: 1px; * /
           /* display: flow-root; * /
         }
   
         .child {
           background-color: red;
           width: 30px;
           height: 30px;
           margin-top: 30px;
         }
   </style>
   <body>
       <div class="container">
         <div class="child"></div>
       </div>
   </body>
Copy the code

Sibling box element collapse, i.e., vertically adjacent sibling elements, the upper element is set to margin-bottom, while the lower element is set to margin-top, and the distance between the two elements is set to the maximum of margin-bottom and margin-top, instead of their sum. The solution is as follows:

   <style>
         /* Solve the problem of sibling collapse: 1. Use only one adjust the spacing of adjacent vertical siblings, i.e. set the spacing of two vertical elements, either make the upper element set margin-bottom, or make the lower element set margin-top. 2. Allow one of the elements to cover a parent element, and enable BFC for the parent element to resolve the collapse. (Not recommended, changed document structure) */
         .container {
           display: flow-root;
         }
         .child1 {
           background-color: red;
           width: 100px;
           height: 100px;
           margin-bottom: 30px;
         }
         .child2 {
           background-color: blueviolet;
           width: 100px;
           height: 100px;
           margin-top: 20px;
         }
   </style>
   <body>
       <div class="child1"></div>
       <div class="container">
         <div class="child2"></div>
       </div>
   </body>
Copy the code

reference

Nicolasgallagher.com/micro-clear…
t.hk.uy/swG
Blog.csdn.net/qq_26780317…
Mastering CSS- Advanced Web Standards Solutions, 3rd edition

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

CSS Basics: Float application/box collapse

Float application

1. Layout of the Holy Cup

Two, double wing layout

Box collapse

What is it

Two, collapse reasons

1) Reasons for box height collapse

2)`margin`Collapse reason

Three, how to solve

1) Solve the height collapse of the box

2) solve`margin`collapse

reference

CSS Basics: Float application/box collapse

Float application

1. Layout of the Holy Cup

Two, double wing layout

Box collapse

What is it

Two, collapse reasons

1) Reasons for box height collapse

2)marginCollapse reason

Three, how to solve

1) Solve the height collapse of the box

2) solvemargincollapse

reference

Related Posts

Hot loading failure caused by using Nginx reverse proxy. Procedure

FreeCodeCamp Javascript basic algorithm summary

An important CSS test point – the three-column layout

2)`margin`Collapse reason

2) solve`margin`collapse