CSS 浮动

最新推荐文章于 2023-02-22 20:32:39 发布

冷月醉雪

最新推荐文章于 2023-02-22 20:32:39 发布

阅读量205

点赞数

分类专栏： CSS 实例 CSS 文章标签： CSS 浮动实例

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/81506003

版权

CSS 同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

CSS 实例

22 篇文章 0 订阅

订阅专栏

简单的使用float属性

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			img {
				float:right;
			}
		</style>
	</head>
	<body>
		<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
		<p>
		<img src="logocss.gif" width="95" height="84" />
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		这是一些文本。这是一些文本。这是一些文本。
		</p>
	</body>
</html>

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

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</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="logocss.gif" 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>自学教程(如约智惠.com)</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="logocss.gif" width="95" height="84" /><br>
			CSS is fun!
		</div>
		<p>
			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.
			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>
			在上面的段落中,div元素是120像素宽,它包含了图像。
			div元素会向右浮动。
			Margins 被添加到div使得文本远离div。
			Borders和padding被添加到div框架的图片和标题中
		</p>
	</body>
</html>

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

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</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>自学教程(如约智惠.com)</title> 
		<style >
			.thumbnail {
				float:left;
				width:110px;
				height:90px;
				margin:5px;
			}
		</style>
	</head>
	<body>
		<h3>图片库</h3>
		<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
		<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
		<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
		<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
		<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
		<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
		<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
		<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
		<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
	</body>
</html>

开启float-clear属性

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</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="klematis_small.jpg" width="107" height="90">
		<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
		<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
		<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
		<h3 class="text_line">第二行</h3>
		<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
		<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
		<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
		<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
	</body>
</html>

创建一个水平菜单

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</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="#">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元素和元素浮动。
		li元素将显示为内联元素(没有换行符的元素之前或之后)。这迫使列表为一行。
		ul元素的宽度的100%,每一个超链接列表的宽度6 em(当前字体大小的6倍)。
		我们添加一些颜色和边界使其更高档。</p>
	</body>
</html>

创建一个没有表格的网页

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			* {
				box-sizing: border-box;
			}
			body {
				margin: 0;
			}
			.header {
				background-color: #2196F3;
				color: white;
				text-align: center;
				padding: 15px;
			}
			.footer {
				background-color: #444;
				color: white;
				padding: 15px;
			}
			.topmenu {
				list-style-type: none;
				margin: 0;
				padding: 0;
				overflow: hidden;
				background-color: #777;
			}
			.topmenu li {
				float: left;
			}
			.topmenu li a {
				display: inline-block;
				color: white;
				text-align: center;
				padding: 16px;
				text-decoration: none;
			}
			.topmenu li a:hover {
				background-color: #222;
			}
			.topmenu li a.active {
				color: white;
				background-color: #4CAF50;
			}
			.column {
				float: left;
				padding: 15px;
			}
			.clearfix::after {
				content: "";
				clear: both;
				display: table;
			}
			.sidemenu {
				width: 25%;
			}
			.content {
				width: 75%;
			}
			.sidemenu ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			.sidemenu li a {
				margin-bottom: 4px;
				display: block;
				padding: 8px;
				background-color: #eee;
				text-decoration: none;
				color: #666;
			}
			.sidemenu li a:hover {
				background-color: #555;
				color: white;
			}
			.sidemenu li a.active {
				background-color: #008CBA;
				color: white;
			}	
		</style>
	</head>
	<body>
		<ul class="topmenu">
		  <li><a href="#home" class="active">主页</a></li>
		  <li><a href="#news">新闻</a></li>
		  <li><a href="#contact">联系我们</a></li>
		  <li><a href="#about">关于我们</a></li>
		</ul>

		<div class="clearfix">
		  <div class="column sidemenu">
			<ul>
			  <li><a href="#flight">The Flight</a></li>
			  <li><a href="#city" class="active">The City</a></li>
			  <li><a href="#island">The Island</a></li>
			  <li><a href="#food">The Food</a></li>
			  <li><a href="#people">The People</a></li>
			  <li><a href="#history">The History</a></li>
			  <li><a href="#oceans">The Oceans</a></li>
			</ul>
		  </div>

		  <div class="column content">
			<div class="header">
			  <h1>The City</h1>
			</div>
			<h1>Chania</h1>
			<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
			<p>You will learn more about responsive web pages in a later chapter.</p>
		  </div>
		</div>

		<div class="footer">
		  <p>底部文本</p>
		</div>
	</body>
</html>

参考：

https://www.yuque.com/docs/share/077e4eed-8f70-43d0-92f5-25aa612d6358

冷月醉雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 浮动

简单的使用float属性&lt;!DOCTYPE html &gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;自学教程(如约智惠.com)&lt;/title&gt; &lt;style &gt; img { float:right; }
复制链接

扫一扫

专栏目录