Article From:https://www.cnblogs.com/xubj/p/9966460.html

Document flowWhen the elements that can be displayed in the document are arrangedStarting positionAnd themOccupied area
Reason: Page elements are different, according to their own characteristics to display, the area occupied in the page is different.
Order: from top to bottom, from left to right

cssFloating float

Concept: Move elements away from the document stream in a specified direction and stop when they encounter parent or adjacent elements

Features: 1) Block elements can be displayed in one line

            2)Move in one direction

            3)In-line elements support width and height

            4)Departure from document flow (elements are no longer in the page)

               Note: The position of the element with the float heel (no float) starts at the position of the element with the float front.

                          The contents of the non-floating element leave the position of the floating element (box model position) in front of it.

           5)The default width of the block element (which defaults to a full line) changes (by content or by width).

Code

1 .container div {
2         width: 100px;
3         height: 100px;
4         background: green;
5         float: left;
6     }
<div class='container'>
        <div></div>
        <span>The position of the element with the float heel (no float) begins with the position of the element with the float ahead.The contents of the non-floating element leave the position of the floating element (box model position) in front of it.The position of the element with the float heel (no float) begins with the position of the element with the float ahead.Contents in non-floating elementsThe position of the element that leaves the front floating element (box model position) and the element that follows the float (no float) starts from the position of the element that floats in front of it.The contents of a non-floating element leave the position of the front floating element (the box model position) and the position of the elements that follow the float (no float) floating from the front.Starting from the position of the element.The contents of a non-floating element leave the position of the previous floating element (box model position) and the position of the element (no float) after the float starts from the position of the previous floating element.The contents of the non-floating element leave the position of the floating element in front (the box model position) floating behind.The position of the element (without floating) begins with the position of the element that floats in front of it.The contents of a non-floating element leave the position of the previous floating element (box model position) and the position of the element (no float) after the float starts from the position of the previous floating element.The contents of the non-floating elements will be left in frontLocation of floating elements (box model position)</span>

Result:

           6)The parent height collapses (destructively). If the child element floats, the parent height will not automatically open.

//cssCode.container {Border: 2px solid red;}.container div {Width: 100px;Height: 100px;/*float: left; * /Background: green;}//html code<div class='container'>
        <div></div>
    </div>

Clear floating

1) clear There can be no floating elements in one direction of the element

     clear :left  There must be no floating element on the left side of the element

              right  There must be no floating element on the right side of the element

              both There should be no floating elements on either side of the element (commonly used)

2)overflow:hidden

    If the child level has a position and is beyond the scope of the parent level, then the content of the child level positioning will disappear, there can be no such command.

3)Empty Tags

    Empty labels have no content, but they are used to float clearly, and they do not conform to the separation of behavior, structure and style.

<div class='container'>
        <div class='box'></div>
        <div style='clear:both;'></div>
    </div>

4)afterPseudo-class removal floating is the mainstream method at present.

     after   Represents the last part of the content of the selected element (the default addition is the in-line element), which is used in conjunction with content.

    content  Content set

  CSSCode

  .container {
        border: 2px solid red;
    }

    .container .box {
        width: 100px;
        height: 100px;
        float: left;
        background: green;
    }

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

HTMLCode

<div class='container clearfix'>
        <div class='box '></div>
</div>

results of enforcement

BFC   Block Formatting Contexts  Block-level element formatting context

DecidedBlock level elementsHow to treat itcontentLayout, andOther elementsRelationship andInteraction

Key Word Interpretation: Block level element: refers to the parent level (block level element)

                     Content: child elements (block-level elements)

                     Other Elements: Brothers with Content Level

                     Interaction: Elements in BFC and external elements will not be affected

 

Layout Rules for Ordinary Document Flows
1:Floating elements will not be calculated by the parent (parent height collapses)
2:Non-floating elements cover the position of floating elements.
3:marginWill pass to the parent.
4:2The upper and lower elements of the adjacent elements overlap.

BFCLayout rules
1:Floating elements are computed by the parent level (the parent triggers the BFC)
2: Non-floating elements do not cover the position of floating elements (non-floating elements trigger BFC)
3:marginNot passed to parent (parent triggers BFC)
4:Margin does not overlap between two adjacent elements (add a separate parent to one of the elements and let his parent trigger BFC)

How to trigger BFC (any of the following will do)
1:floatThe value is not null
2:overflowThe value is not visible
3:displayThe value is table-cell, table-caption, inline-block.
4:positionThe value is not static, relative.

 Give me some chestnuts:

1:Adaptive two-column layout:

Code

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

Page display:

Note: Non-floating elements will cover the position of floating elements, that is, the main area and the left column begin to overlap. Solution, let non-floating elements trigger BEC

.main {
    overflow: hidden;
}

Trigger main generationBFCAfter this newBFCIt does not overlap with floating aside. Therefore, it automatically narrows according to the width of the containing block (parent level) and the width of the aside. The effect is as follows

2:Clear internal float

 1 <style>
 2     .par {
 3         border: 5px solid #fcc;
 4         width: 300px;
 5     }
 6  
 7     .child {
 8         border: 5px solid #f66;
 9         width:100px;
10         height: 100px;
11         float: left;
12     }
13 </style>
14 <body>
15     <div class="par">
16         <div class="child"></div>
17         <div class="child"></div>
18     </div>
19 </body>

Page effect:

To clear the internal float, we can trigger par generationBFC,So when par calculates the height, the floating element child inside par also participates in the calculation.

1 .par {
2     overflow: hidden;
3 }

3:Prevent page margin overlap

 1 <style>
 2     p {
 3         color: #f55;
 4         background: #fcc;
 5         width: 200px;
 6         line-height: 100px;
 7         text-align:center;
 8         margin: 100px;
 9     }
10 </style>
11 <body>
12     <p>Haha</p>
13     <p>Hehe</p>
14 </body>

Page display:

marginDoes overlap cause up-and-down distance between two P’s or 100’s?
  

 

We can wrap a container outside P and trigger the container to generate aBFC。So two P’s don’t belong to the same one.BFC,There will be no margin overlap.
Code:

1 <p>Haha</p>
2     <div style='overflow:hidden;'>
3         <p>Hehe</p>
4     </div

Page display:

Leave a Reply

Your email address will not be published. Required fields are marked *