菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

开通VIP

领取更多软件工程师实用特权

 入驻

搜索

类型： 全部 | 视频教程 | 实战项目 | 项目源码 | 技术手册 | 课件 | 测试题 | 技术文章 | 软件下载 | 问答求助
水平： 全部 | 入门 | 普通 | 进阶

历史记录 清除记录

    你还没搜索过喔。

近期热搜

项目开发全程实录（电商EW_Shop）

8713 人 2年前

轻松学会Laravel-项目篇（商城API）

2030 人 2年前

Python数据分析2.0-金融

329 人 3年前

Python办公自动化2.0

243 人 3年前
阅读(56) 书签 赞(0) 我要纠错

CSS浮动

原创
CSS教程
05/13 14:22 更新
尊享10+项VIP特权
会员卡
开通学习猿地会员卡

简单的使用float属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title>
<style>
    img 
    {
    	float:right;
    }
</style>
</head>

<body>
    <p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
    <p>
    <img src="/attachments/cover/cover_css.png" width="95" height="84" />
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    </p>
</body>

</html>

为图像添加边框和边距并浮动到段落的左侧

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    img 
    {
    	float:right;
    	border:1px dotted black;
    	margin:0px 0px 15px 20px;
    }
</style>
</head>

<body>
    <p>
    	在下面的段落中,图像将向右浮动。黑色虚线边界添加到图像。
    我们还添加了边缘的0 px的顶部和右侧 margin,15 px底部margin,和20 px左侧的margin的图像。使得文本远离图片:</p>
    <p>
    <img src="/attachments/cover/cover_css.png" width="95" height="84" />
    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. 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. This is some text.
    This is some text. This is some text. This is some text.
    </p>
</body>

</html>

标题和图片向右侧浮动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    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="/attachments/cover/cover_css.png" width="95" height="84" /><br>
    CSS is fun!
    </div>
    <p>
    这是一些文本. 这是一些文本. 这是一些文本.
    这是一些文本. 这是一些文本. 这是一些文本.
    这是一些文本. 这是一些文本. 这是一些文本.
    这是一些文本. 这是一些文本. 这是一些文本.
    这是一些文本. 这是一些文本. 这是一些文本.
    这是一些文本. 这是一些文本. 这是一些文本.
    这是一些文本. 这是一些文本. 这是一些文本.
    这是一些文本. 这是一些文本. 这是一些文本.
    这是一些文本. 这是一些文本. 这是一些文本.
    这是一些文本. 这是一些文本. 这是一些文本.
    这是一些文本. 这是一些文本. 这是一些文本.
    这是一些文本. 这是一些文本. 这是一些文本.
    </p>
    
    <p>
    	在上面的段落中,div元素是120像素宽,它包含了图像。
    	div元素会向右浮动。
    	Margins 被添加到div使得文本远离div。
    	Borders和padding被添加到div框架的图片和标题中
    </p>
</body>

</html>

让段落的第一个字母浮动到左侧

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title>
<style>
    span
    {
    	float:left;
    	width:1.2em;
    	font-size:400%;
    	font-family:algerian,courier;
    	line-height:80%;
    }
</style>
</head>

<body>
    <p>
    <span>这</span>是一些文本。
    这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    </p>
    
    <p>
    在上面的段落中, 第一个字嵌入在span 元素中。
    这个 span 元素的宽度是当前字体大小的1.2倍。
    这个 span 元素是当前字体的400%(相当大)， line-height 为80%。
    文字的字体为"Algerian"。
    </p>

</body>
</html>

使用float属性创建一个图片廊

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    .thumbnail 
    {
    	float:left;
    	width:110px;
    	height:90px;
    	margin:5px;
    }
</style>
</head>

<body>
    <h3>图片库</h3>
    <p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
    <img class="thumbnail" src="/statics/images/course/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/statics/images/course/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/statics/images/course/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/statics/images/course/klematis4_small.jpg" width="120" height="90">
    <img class="thumbnail" src="/statics/images/course/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/statics/images/course/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/statics/images/course/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/statics/images/course/klematis4_small.jpg" width="120" height="90">
</body>
</html>

开启float - clear属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    .thumbnail 
    {
    	float:left;
    	width:110px;
    	height:90px;
    	margin:5px;
    }
    .text_line
    {
    	clear:both;
    	margin-bottom:2px;
    }
</style>
</head>

<body>
    <h3>图片库</h3>
    <p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
    <img class="thumbnail" src="/statics/images/course/klematis_small.jpg" width="207" height="90">
    <img class="thumbnail" src="/statics/images/course/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/statics/images/course/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/statics/images/course/klematis4_small.jpg" width="120" height="90">
    <h3 class="text_line">第二行</h3>
    <img class="thumbnail" src="/statics/images/course/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/statics/images/course/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/statics/images/course/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/statics/images/course/klematis4_small.jpg" width="120" height="90">
</body>
</html>

创建一个水平菜单

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    ul
    {
    	float:left;
    	width:100%;
    	padding:0;
    	margin:0;
    	list-style-type:none;
    }
    a
    {
    	float:left;
    	width:6em;
    	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="#">链接一</a></li>
        <li><a href="#">链接二</a></li>
        <li><a href="#">链接三</a></li>
        <li><a href="#">链接四</a></li>
    </ul>

    <p>
    上面的示例中,我们让ul元素和元素浮动。
    li元素将显示为内联元素(没有换行符的元素之前或之后)。这迫使列表为一行。
    ul元素的宽度的100%,每一个超链接列表的宽度6 em(当前字体大小的6倍)。
    我们添加一些颜色和边界使其更高档。</p>

</body>
</html>

创建一个没有表格的网页

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    div.container
    {
    	width:100%;
    	margin:0px;
    	border:1px solid gray;
    	
    }
    div.header,div.footer
    {
    	padding:0.5em;
    	color:white;
    	background-color:gray;
    	clear:left;
    }
    h1.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"><h1 class="header">lmonkey.com</h1></div>
    <div class="left"><p>“不要在必要的范围内增加解释任何事情所需的实体数量。”奥卡姆威廉(1285-1349)</p></div>
    <div class="content">
    <h2>免费的网页构建教程</h2>
    <p>在学习猿地你会找到所有你需要的网络建设教程，
从基本的HTML和XHTML到高级XML、XSL、多媒体和WAP.</p>
    <p>学习猿地- 成就自己的只需一套精品!</p></div>
    <div class="footer">版权：1999-2023年.</div>
    </div>

</body>
</html>

推荐文章

推荐教程

推荐课程

    © 著作权归作者所有

    举报
    综合评分：9.9 评分 请对本文进行纠错，及学习过程中有困难疑惑可在此进行讨论

    学习猿地
    程序员学习的地方

    扫码关注

    成就自己的只需一套精品