float的作用

<div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>

.wrapper{
    
    
    width: 300px;
    height: 300px;
    border: 1px solid black; 
}
.content{
    
    
    float: left;
    color: yellowgreen;
    background-color: black;
    width: 100px;
    height: 100px;
}

可以发现div不再是独占一行
将float:left;改成right

浮动元素产生了浮动流(不太了解)
所有产生浮动流的元素,块级元素看不到他们,产生了bfc的元素和文本类型的元素以及文本都能看到浮动元素,

pg.文本类型元素(inline元素)

用父级元素包裹浮动元素

方法1:(不常用,会破坏页面结构)

<p class="clear">
</p>

p{
    
    
	clear:both;
}

span::before{
}
span::after{
}

<div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
    
.wrapper::after{
    
    
    content: "";
    clear: both;
    display:block;
}

!!!clear的使用必须是块级元素

第三种方法

.wrapper{
    
    
    position:absolut;
}

会将浮动元素包裹住 但宽度减少

positio:absolute; float:left/right;
打内部把元素转换成inline-block;

 <span class="content">123</span>
.content{
    
    
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
}