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

发布时间：2022-02-22 10:41:16 作者：小新
来源：亿速云阅读：124

这篇文章主要介绍了CSS定位中浮动和清理的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

CSS 浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
在 CSS 中，我们通过 float 属性实现元素的浮动。

行框和清理
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框（如文本围绕图像）。
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。
clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
这是一个有用的工具，它让周围的元素为浮动元素留出空间。

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

注释：为了进行布局，添加了无意义的标记 clear。另外一种办法，就是对容器 div 进行浮动：

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

注释：效果相同。不过，虽然减少了不必要的标记，但下一个元素会受到这个浮动元素的影响。

浮动和清理实例
将带有边框和边界的图像浮动于段落的右侧：

<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" />
    在本实例的段落中，图像会浮动到右侧，并且添加了点状的边框。
    我们还为图像添加了边距，这样就可以把文本推离图像：
    上和右外边距是 0px，下外边距是 15px，而图像左侧的外边距是 20px。
</p>
</body>
</html>

带标题的图像浮动于右侧：

<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 元素浮动到右侧。
    我们向 div 元素添加了外边距，这样就可以把 div 推离文本。
    同时，我们还向 div 添加了边框和内边距。
</p>
</body>
</html>

使段落的首字母浮动于左侧：

<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 元素的宽度是当前字体尺寸的 0.7 倍。
    span 元素的字体尺寸是 400%，行高是 80%。
    span 中的字母字体是 "Algerian"
</p>
</body>
</html>

创建水平菜单：

<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 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。
    ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。
    我们添加了颜色和边框，以使其更漂亮。
</p>
</body>
</html>

创建无表格的首页：

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

注释：使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。

感谢你能够认真阅读完这篇文章，希望小编分享的“CSS定位中浮动和清理的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!

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

相关阅读