CSS--浮动_浮动的四大元素-CSDN博客

本文链接：https://blog.csdn.net/mh_dream/article/details/98486885

一、浮动

所有的标签一旦设置浮动，就能够并排显示，并且不区分是行内还是块级元素，可以设置宽高。

1.float--可取值如下：

none：不浮动，默认

left：左浮动

right：右浮动

2.浮动的四大特性（紧凑效果、脱标、互相贴靠、"字围"效果）

（1）紧凑效果

一个浮动元素，如果没有设置width和height，就自动收缩为文字的宽度和高度。类似行内元素，如<span>。

html：

<div class="box1">box1</div>
<div class="box2">box2</div>

css样式：

.box1{
	float: left;
	background-color: pink;
}
.box2{
	float: left;
	width:100px;
	height:100px;
	background-color: yellow;

}

效果：

（2）元素脱标

一个浮动元素，脱离了标准文档流，在页面中不占位置，“飘起来了”。

html：

<div  class="box1"></div>
<div  class="box2"></div>
<span class="span1"></span>
<span class="span2"></span>

css样式：

.box1{
	width: 100px;
	height: 100px;
	background-color: pink;
	float: left;
}
.box2{
	width: 200px;
	height: 200px;
	background-color: yellow;
}
.span1{
	background-color: orange;
	float: left;
	width: 100px;
	height: 100px;
}
.span2{
	background-color: pink;
	float: left;
	width: 100px;
	height: 100px;
}

效果：

box1设置了浮动，box2没有设置浮动，box1脱离了标准文档流，它不在页面中占位置了，浏览器认为box2是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。

（3）互相贴靠

有足够的空间，那么在一行内一个靠着一个显示；没有足够的空间，换行一个靠着一个显示。

html：

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>

css样式：

.box1{
    width: 800px;
    height: 100px;
    float: left;
    background-color: pink;
}
.box2{
    width: 600px;       
    height: 150px;
    float: left;
    background-color: yellow;
}
.box3{
    width: 1400px;
    height: 100px;
    float: left;
    background-color: orange;
}
.box4{
    width: 500px;
    height: 150px;
    float: left;
    background-color: pink;
}
.box5{
    width: 300px;
    height: 100px;
    float: left;
    background-color: yellow;
}

效果：

（4）元素"字围"效果

当div设为浮动，p不浮动时，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。

html：

<div class="box1">box1</div>
<p class="p1">1234567890我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国我和我的祖国</p>

css样式：

.box1{
    width: 800px;
    height: 100px;
    float: left;
    background-color: pink;
}
.p1{

    background-color: yellow;

}

效果：

二、清除浮动

浮动能实现页面元素并排的效果，但同时带来了页面布局极大的错乱，因此需要清除浮动。

清除浮动的四种方式：伪元素清除法、给父盒子设置高度、clear、overflow:hidden。

1.伪元素清除法(常用)

给浮动元素的父盒子，父盒子不浮动，添加一个clearfix的类

.clearfix:after{

    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden

}

html：

<div class="clearfix">
	<div class="box1">box1</div>
</div>      
<div class="box">

css样式：

.box1{
	float: left;
	width: 100px;
	height: 40px;
	background-color: orange;
}
.box{
	width: 200px;
	height: 100px;
	background-color: yellow;
}

.clearfix:after{

    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden

}

效果：

2.给父盒子设置高度，且高度要大于等于浮动元素最高的高度（灵活度低）

html：

<div class="father1">    
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</div>

<div class="father2"></div>

css样式：

.father1{
	width: 1000px;
	/*height: 200px;*/
	}
.box1{
	width: 200px;
	height: 200px;
	float: left;
	background-color: pink;
}
.box2{
	width: 400px;
	height: 200px;
	float: left;
	background-color: yellow;
}
.box3{
	width: 400px;
	float: left;
	height: 100px;
	background-color: orange;
}
.father2{
	width: 1000px;
	height: 200px;
	background-color: purple;
}

效果：

不给father1设置高度：

给father1设置高度后：

3. clear

clear可以设置为以下三种：

left：当前元素左边不允许有浮动元素

right：当前元素右边不允许有浮动元素

both：当前元素左右两边不允许有浮动元素

给浮动元素后面加一个空的div 且该元素不浮动，然后设置clear清除浮动影响。加div元素，造成结构冗余。

html：

<div class="box1">box1</div>
<div class="clear"></div>         
<div class="box">

css样式：

.box1{
	float: left;
	width: 100px;
	height: 40px;
	background-color: orange;
}
.box{
	width: 200px;
	height: 100px;
	background-color: yellow;
}
.clear{
	clear: both;  // clear: left;
}

效果：

4.overflow:hidden

overflow定义溢出元素内容区的内容会如何处理。有五种取值：

visible：默认值。内容不会被修剪，会显示在元素框之外。

scroll ：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto ：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit ：规定从父元素继承 overflow 属性的值。

hidden：内容会被修剪，并且其余内容是不可见的。

给浮动元素的父元素设置overflow:hidden，即可清除浮动。

html：

<div class="hiddenbox">
    <div class="box1">box1</div>   
</div>
<div class="box2">box2</div>

css样式：

.hiddenbox{
	width: 200px;
	height: 100px;
	background-color: yellow;
	overflow:hidden;
}
.box1{
	float: left;
	width: 100px;
	height: 40px;
	background-color: orange;


}
.box2{
	
	width: 100px;
	height: 40px;
	background-color: pink;
}

效果：