Floating and positioning

1. float

Property value	describe
left	Element floating to the left
right	The element floats to the right
none	Element does not float

Elements do not occupy positions after floating , Off stream , But not out of the text stream , The nearest words will surround him

<style> .box {
    
    /* overflow: hidden; */
}

.box::after {
    
    content: "";
    display: block;
    clear: both;
}
.red {
    
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}
/*  But if you use absolute positioning , The element will be separated from the document flow , Also out of the text stream  */
.green {
    
    float: left;
    width: 100px;
    height: 100px;
    background: green;
}
.blue {
    
    float: left;
    width: 100px;
    height: 100px;
    background: blue;
}
.footer{
    
    width:400px;
    height:200px;
    background:pink
}

.both {
    
    /* clear: both; */
}
</style>

<div class="box">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="both"></div>
    <!-- <p>CSS  There are three basic positioning mechanisms ： Ordinary flow （ The document flow ）、 Floating and absolute positioning .</p> -->
</div>
<div class="footer"></div>

1.1 Remove the floating

1. Add height to parent element

.box{
    
	height:100px;
}

2. Set parent element overflow:hidden

.box{
    
	 overflow:hidden
}

3. Parent definition Pseudo elements ::after

.box::after {
    
    content: "";
    display: block;
    clear: both;
}

4. Blank at the end div, Or add... To the affected elements clear:both

.both {
    
    clear: both;
}

1.2 Trigger BFC

BFC（Box Formatting Context, Block level formatting context ） It's an isolated container on the page , The child elements inside the container do not affect the elements outside .

A box is not set height when , When all content elements are floating , Can't hold themselves up , Therefore, you need to create BFC To avoid this situation
How to create BFC：
1.float Not for none
2.position by fixed or absolute
3.display The value of is inline-block、flex perhaps table
4.overflow Not for visible

BFC Other functions of ：
1. You can cancel the box margin Collapse ;
2. Can prevent elements from being overwritten by floating elements .

2. location

The positioning of child elements relative to the parent element means that the child element is based on the nearest It's positioned ( absolute 、 Fixed or relative positioning ) Parent element of Positioning , If none of the parent elements are located , According to body Root element ( Browser window ) Positioning .