溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS定位中浮動和清理的示例分析

發(fā)布時間：2022-02-22 10:41:16 來源：億速云 閱讀：136 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要介紹了CSS定位中浮動和清理的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

CSS 浮動
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。
在 CSS 中，我們通過 float 屬性實現(xiàn)元素的浮動。

行框和清理
浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框（如文本圍繞圖像）。
要想阻止行框圍繞浮動框，需要對該框應(yīng)用 clear 屬性。
clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應(yīng)該挨著浮動框。
這是一個有用的工具，它讓周圍的元素為浮動元素留出空間。

<style type="text/css">
.news {
    background-color: gray;
    border: solid 1px black;
}
.news img {
    float: left;
}
.news p {
    float: right;
}
.clear {
    clear: both;
}
</style>
<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="clear"></div>
</div>

注釋：為了進(jìn)行布局，添加了無意義的標(biāo)記 clear。另外一種辦法，就是對容器 div 進(jìn)行浮動：

<style type="text/css">
.news {
    background-color: gray;
    border: solid 1px black;
    float: left;
}
.news img {
    float: left;
}
.news p {
    float: right;
}
</style>
<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
</div>

注釋：效果相同。不過，雖然減少了不必要的標(biāo)記，但下一個元素會受到這個浮動元素的影響。

浮動和清理 實例
將帶有邊框和邊界的圖像浮動于段落的右側(cè)：

<html>
<head>
<style type="text/css">
img {
    float: right;
    border: 1px dotted black;
    margin: 0px 0px 15px 20px;
}
</style>
</head>
<body>
<p>
    <img src="../cute.gif" />
    在本實例的段落中，圖像會浮動到右側(cè)，并且添加了點狀的邊框。
    我們還為圖像添加了邊距，這樣就可以把文本推離圖像：
    上和右外邊距是 0px，下外邊距是 15px，而圖像左側(cè)的外邊距是 20px。
</p>
</body>
</html>

帶標(biāo)題的圖像浮動于右側(cè)：

<html>
<head>
<style type="text/css">
div {
    float: right;
    width: 120px;
    margin: 0 0 15px 20px;
    padding: 15px;
    border: 1px solid black;
    text-align: center;
}
</style>
</head>
<body>
<div>
    <img src="../cute.gif" /><br />
    CSS is fun!
</div>
<p>
    在本實例的段落中，div 元素的寬度是 120 像素，它其中包含圖像。
    div 元素浮動到右側(cè)。
    我們向 div 元素添加了外邊距，這樣就可以把 div 推離文本。
    同時，我們還向 div 添加了邊框和內(nèi)邊距。
</p>
</body>
</html>

使段落的首字母浮動于左側(cè)：

<html>
<head>
<style type="text/css">
span {
    float: left;
    width: 0.7em;
    font-size: 400%;
    font-family: algerian,courier;
    line-height: 80%;
}
</style>
</head>
<body>
<p>
    <span>T</span>his is some text.This is some text.
    This is some text. This is some text.This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
</p>
<p>
    在上面的段落中，文本的第一個字母包含在一個 span 元素中。
    這個 span 元素的寬度是當(dāng)前字體尺寸的 0.7 倍。
    span 元素的字體尺寸是 400%，行高是 80%。
    span 中的字母字體是 "Algerian"
</p>
</body>
</html>

創(chuàng)建水平菜單：

<html>
<head>
<style type="text/css">
ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}
a {
    float: left;
    width: 7em;
    text-decoration: none;
    color: white;
    background-color: purple;
    padding: 0.2em 0.6em;
    border-right: 1px solid white;
}
a:hover {
    background-color: #ff3300;
}
li {
    display:inline;
}
</style>
</head>
<body>
<ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
</ul>
<p>
    在上面的例子中，我們把 ul 元素和 a 元素浮向左浮動。
    li 元素顯示為行內(nèi)元素（元素前后沒有換行）。這樣就可以使列表排列成一行。
    ul 元素的寬度是 100%，列表中的每個超鏈接的寬度是 7em（當(dāng)前字體尺寸的 7 倍）。
    我們添加了顏色和邊框，以使其更漂亮。
</p>
</body>
</html>

創(chuàng)建無表格的首頁：

<html>
<head>
<style type="text/css">
div.container {
    width: 100%;
    margin: 0px;
    border: 1px solid gray;
    line-height: 150%;
}
div.header,div.footer {
    padding: 0.5em;
    color: white;
    background-color: gray;
    clear: left;
}
h2.header {
    padding: 0;
    margin: 0;
}
div.left {
    float: left;
    width: 160px;
    margin: 0;
    padding: 1em;
}
div.content {
    margin-left: 190px;
    border-left: 1px solid gray;
    padding: 1em;
}
</style>
</head>
<body>
<div class="container">
    <div class="header"><h2 class="header">HuluMiao.cn</h2></div>
    <div class="left">
        <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p>
    </div>
    <div class="content">
        <h3>Free Web Building Tutorials</h3>
        <p>At HuluMiao.cn you will find all the Web-building tutorials you need,from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
        <p>HuluMiao.cn - The Largest Web Developers Site On The Net!</p>
    </div>
    <div class="footer">Copyright 2008 by HuluMiao.cn.</div>
</div>
</body>
</html>

注釋：使用浮動來創(chuàng)建擁有頁眉、頁腳、左側(cè)目錄和主體內(nèi)容的首頁。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS定位中浮動和清理的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手