前端-浮动元素的作用

一、文字环绕

1.文字说明

浮动元素会脱离网页文档，会与其他元素发生重叠，但不会与文本内容发生重叠

2.代码

div:nth-child(1){
	 width: 50px;
	 height: 50px;
	 float: left;
	 background: greenyellow;
}
div:nth-child(2){
	 width: 200px;
	 height: 100px;
	 background: red;
}

<div></div>
<div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>

3. 效果

二、 横向排版

1.代码

 *{
     margin: 0;
     padding: 0;
 }
div{
    width: 20%;
    height: 300px;
    float: left;
}
div:nth-child(1){
    background: paleturquoise;
}
div:nth-child(2){
    width: 60%;
    height: 300px;
    background: orange;
}
div:nth-child(3){
    background: lightgrey;
}

<div></div>
<div></div>
<div></div>

2.效果