Recently began to learn the classic two layout — grail layout && double wings layout, good memory is not as bad as the pen, go

layout

The main module is loaded first. 2. The width of the main module fills the parent containerCopy the code

For example

See the final effect of the small example (uncleared float before, cleared float after)

infrastructure

<header> Holy cup layout </header> <div class="content clearfix">
            <div class="main text">main</div>
            <div class="left text">left</div>
            <div class="right text">right</div>
    </div>
   <footer>footer</footer>
Copy the code

Implementation steps

  1. Because the main module is loaded first, the top down interpretation mechanism places the main module on top of the parent container. The initial layout is as follows

     .main {
                float: left;
                width: 100%;
                height: 200px;    
                background: # 000;
            }
Copy the code

          .left {
                float: left;
                width: 200px;
                height: 200px;
                background: pink;
                position: relative;
                left: -200px;
                margin-left: -100%;
            }
Copy the code

            .right {
                float: left;
                width: 200px;
                height: 200px;
                background-color: #4ddef1;
                margin-left: -200px;
                position: relative;
                left: 200px;
            }
Copy the code

            .clearfix::after {
                content: "";
                display: table;
                clear: both;
            }
Copy the code

Clear float

####### Clear float at present there are five methods in the industry (I personally feel can be counted as three, because 13 are clear: both; It’s just a simplification using features like pseudo-elements; 25 both trigger BFC)

  1. Add a div style=”clear: both”;
  2. Inside the parent style add: overflow: hidden/auto/scroll; ====== Trigger BFC (block-level formatting context)
  3. ===== Parent add pseudo-elements, block and clear: both (essentially a simplified version of the first)
  4. Float the parent element
  5. Nicholas Master Qing Fu ==== Parent define style as display: table==== default trigger BFC (block-level formatting context)