CSS float的相关图文详解（二）

时间 2019-11-26

标签 css float 相关图文详解栏目 CSS 繁體版

原文原文链接

　　最近这段时间有些忙，一直没有写关于如何清除浮动的，如今终于抽出时间了，仍是那句话，若是哪里有错误或者错别字，但愿你们留言指正。咱们一块儿进步！css

　　在CSS中，咱们经过float属性实现元素的浮动。浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框，所以，建立浮动能够使文本围绕图像：html

　　例如：浏览器

若是想要阻止行框围绕浮动框，就须要对该框应用 clear 属性。布局

clear属性规定元素的哪一侧不容许有其余浮动元素，也就是说表示框的哪些边不该该挨着浮动框。其值有：spa

　　left：元素左侧不容许有浮动元素3d

　　right：元素右侧不容许有浮动元素htm

　　both：元素左右两侧不容许有浮动元素blog

　　none：默认值，容许浮动元素出如今两侧文档

为了实现这种效果，在被清理的元素的上外边距删添加足够的空间，使元素的顶边缘垂直降低到浮动框下面：it

那么为何要清除浮动？咱们知道浮动的本质是用来作一些文字混排效果的，可是，被拿来作布局用则会有不少的问题出现。因为浮动元素再也不占用原文档流的位置，因此它会对后面的元素排版产生影响。为了解决这些问题就须要在该元素中清除浮动。准确来讲并非清除浮动，而是清除浮动后形成的影响。

清除浮动本质：清除浮动主要是为了解决父元素由于子级浮动引发内部高度为0的问题(父级元素没有设置高度)。

　　　　　　清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口，不让子元素出来影响其余元素。

清除浮动的方法：

　　1.额外标签法：经过在浮动元素的末尾添加一个空标签，也就是说若是有多个浮动的话，在最后一个浮动的末尾添加一个空标签。例如'<div style=clear:both></div>'，若是在父盒子中有多个子盒子，那就选择父盒子中最后一个带有浮动的子盒子。

　　html代码：　

<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
	<div class="father">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

　　css代码：　

<style>
	.father{
		border:1px solid red;
		width:300px;
}
	.big{
		width:100px;
		height:100px;
		background-color:red;
}
	.small{
		width:100px;
		height:100px;
		background-color:blue;
}
	.footer{
		width:310px;
		height:105px;
		background-color:green;
}
</style>

　　显示效果以下：

这是没有加浮动的盒子的排列效果。而加了浮动以后的代码以下(html代码不变，变的是css代码)：　

<style>
	.father{
		border:1px solid red;
		width:300px;
}
	.big{
		width:100px;
		height:100px;
		background-color:red;
               /*添加了浮动*/
		float:left;
}
	.small{
		width:100px;
		height:100px;
		background-color:blue;
                  /*添加了浮动*/
		float:left;
}
	.footer{
		width:310px;
		height:105px;
		background-color:green;
}
</style>

　而这时的显示效果以下：

从代码中能够看出，咱们没有给父盒子高度，给了big和small浮动，而后footer盒子跑到了father的下面，缘由是没有给father高度，big和small一浮动，父元素father的高度就是0了。而解决这个问题的方法能够使用额外标签方法，即最后一个浮动标签的后面，新添加一个标签，用来清除浮动。代码以下：　

<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
	<div class="father">
		<div class="big"></div>
		<div class="small"></div>
               <div style="clear:both">这里添加了一个新标签div，使用的是行内样式清除浮动的</div>
	</div>
	<div class="footer"></div>
</body>
</html>

　　显示效果以下：

　　2.父级添加overflow属性方法：能够给父级添加：overflow为hidden | auto | scroll

　　html代码：　　

<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
	<div class="father">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>

</body>
</html>

　　css代码：　　

<style>
	.father{
		border:1px solid red;
		width:300px;
}
	.big{
		width:100px;
		height:100px;
		background-color:red;
		float:left;
}
	.small{
		width:100px;
		height:100px;
		background-color:blue;
		float:left;
}
	.footer{
		width:310px;
		height:105px;
		background-color:green;
}
</style>

　　显示效果以下：

这时，给big和small添加了浮动，而后footer就跑到了falter的下面，由于自己father是没有高度的，father的高度是big和small撑开的，big和small添加了浮动就不占据原来的位置了，因此father的高度就为0，这时footer就占据了father的位置。解决方法能够给父元素father添加overflow的属性。css代码展现以下　

<style>
	.father{
		border:1px solid red;
		width:300px;
               /*给父元素添加overflow属性清除浮动*/
                overflow:hidden;
}
	.big{
		width:100px;
		height:100px;
		background-color:red;
		float:left;
}
	.small{
		width:100px;
		height:100px;
		background-color:blue;
		float:left;
}
	.footer{
		width:310px;
		height:105px;
		background-color:green;
}
</style>

　　显示效果以下：

　　3.使用after伪元素清除浮动：记住：：：是给父元素添加伪元素。

　　html代码：　　　

<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
	<div class="father">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>

</body>
</html>

　　css代码：

<style>
	.father{
		border:1px solid red;
		width:300px;
		overflow:hidden;
}
	.big{
		width:100px;
		height:100px;
		background-color:red;
		float:left;
}
	.small{
		width:100px;
		height:100px;
		background-color:blue;
		float:left;
}
	.footer{
		width:310px;
		height:105px;
		background-color:green;
}
</style>

　　显示效果以下：

　　父盒子没有给高度，给了big和small浮动，而后footer盒子跑到了father下面，缘由是没有给father高度，big和small一浮动父亲的高度就为0了。而清除浮动的方法能够使用伪元素清除浮动，代码以下显示：

　　html代码：　　　

<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
       <!--clearfix这个名字是能够随意取的-->
	<div class="father  clearfix">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>

</body>
</html>

　　css代码：　　

/*利用伪元素清除浮动*/
        .clearfix:after{   /*正常浏览器清除浮动*/
            content:"";
            display:block;
            height:0;
            clear:both;
            visibility: hidden;
        }
        /*ie6清除浮动方式*/
        .clearfix{
            zoom:1;
        }
        .father {
            border: 1px solid red;
            width: 300px;
        }
        .big{
            width:100px;
            height:100px;
            background: #faa363;
            float: left;
        }
        .small{
            width:100px;
            height:100px;
            background: #2bc4e2;
            float:left;
        }
        .footer{
            width:310px;
            height:105px;
            background: blue;
        }

　　显示效果以下：