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;
        }

　　顯示效果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。