float中的某些問題

時間 2019-11-17

標籤 float 某些問題欄目 CSS 简体版

原文原文鏈接

float浮動，在css中一個至關重要的屬性功能，其能夠用來建立多列網頁佈局、由無序列表建立導航工具欄等。float屬性的取值包括：none（不浮動）、left（左浮動）、right（右浮動）。其能夠應用於不只於圖像，還包括段落、列表、div塊等，但在使用float時應注意幾個幾個基本行爲： css

一、當float不等於none，即引發元素浮動時，元素將被視爲塊元素，至關於display：block； html

二、當浮動文本類時，必須指定其width值工具

三、浮動元素將停留在包含在它的父級元素的區域裏，不會穿過padding區佈局

在使用float時，首先要明白的是，其浮動的定位是相對於父級元素的；以下： ui

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<style type="text/css">
*{ margin: 0; padding: 0; }
.main{ width: 1024px; height: 768px; background-color: gray; }
.left{ width:200px; height:50px; background-color: blue; /*float:left;*/ }
.right{ width:250px; height:60px; background-color: red; float:right; }
</style>
</head>
<body>
<div class="main">
<div class="left">
<label>藍色區域</label>
</div>
<div class="right">
<label>紅色區域</label>
</div>
</div>
</body>
</html》 htm

第一個爲紅色區域.right中未設置漂浮時圖片，後爲漂浮後圖片。經過其能夠看出：一、當紅色區域向右飄時，其相對於其父元素div，即灰色區域向右漂浮。二、在藍色區域，雖然設置其width和height屬性值，但其仍會佔據整個行的區域，設置width值僅爲可視區域。所以，紅色區域未漂浮至灰色區域最右頂端，若想其漂浮至最右頂端，則須要設置.left{float：left；}即將註釋/*float:left*/取消結果如：圖片

在使用漂浮時，因爲浮動元素不會佔據正常文檔流空間，所以浮元素起因區域將由未明肯定位的塊級元素填充其區域。 utf-8

還有個問題，便是，浮動元素的容器不會自動伸展來包含浮動元素而引發父級元素的坍塌，如上代碼，若將藍色區域與紅色區域均進行漂浮，再將父級元素div中.main中height屬性不設置，代碼改成 .main{ width:524px; margin: auto; background-color: gray; }，則結果將是：文檔

平面圖 it

立體圖

其父級元素div將消失。

float的使用能夠更好的進行css佈局，但在使用中要根據狀況酌情使用。