此页面包含常见的浮动示例。
Box 1
Box 2
Box 1
Box 2
Box 3
使用 float
属性,可以轻松并排浮动内容框:
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* three
boxes (use 25% for four, and 50% for two, etc) */
padding:
50px; /* if you want space between the images */
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 50px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Grid of Boxes</h2>
<p>Float boxes side by side:</p>
<div class="clearfix">
<div class="box" style="background-color:#bbb">
<p>Some text inside the box.</p>
</div>
<div class="box" style="background-color:#ccc">
<p>Some text inside the box.</p>
</div>
<div class="box" style="background-color:#ddd">
<p>Some text inside the box.</p>
</div>
</div>
<p><strong>Note:</strong> Here, we use the clearfix hack to take care of the layout flow.
We also use the box-sizing property to make sure that the box doesn't break due to extra padding. Try to remove this code to see the effect.</p>
</body>
</html>
什么是盒子大小?
您可以轻松地并排创建三个浮动框。但是,当您添加一些东西来扩大每个框的宽度(例如填充或边框)时,框就会破裂。 box-sizing
属性允许我们将内边距和边框包含在框的总宽度(和高度)中,确保内边距保持在框内并且它不会破裂。
您可以在我们的 CSS Box Sizing 章节中阅读有关 box-sizing 属性的更多信息。
框网格也可用于并排显示图像:
.img-container {
float: left;
width: 33.33%; /* three
containers (use 25% for four, and 50% for two, etc) */
padding:
5px; /* if you want space between the images */
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>Float images side by side:</p>
<div class="clearfix">
<div class="img-container">
<img src="img_5terre.jpg" alt="Italy" style="width:100%">
</div>
<div class="img-container">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="img-container">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
<p>Note that we also use the clearfix hack to take care of the layout flow, and that we add the box-sizing property to make sure that the image container doesn't break due to extra padding. Try to remove this code to see the effect.</p>
</body>
</html>
在前面的示例中,您学习了如何以相等的宽度并排浮动框。然而,创建等高的浮动盒子并不容易。快速修复 然而,是设置一个固定的高度,如下例所示:
Some content, some content, some content
Some content, some content, some content
Some content, some content, some content
Some content, some content, some content
.box {
height: 500px;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 50%;
padding: 50px;
height: 300px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Equal Height Boxes</h2>
<p>Floating boxes with equal heights:</p>
<div class="clearfix">
<div class="box" style="background-color:#bbb">
<h2>Box 1</h2>
<p>Some content, some content, some content</p>
</div>
<div class="box" style="background-color:#ccc">
<h2>Box 2</h2>
<p>Some content, some content, some content</p>
<p>Some content, some content, some content</p>
<p>Some content, some content, some content</p>
</div>
</div>
<p>This example not very flexible. It is ok to use CSS height if you can guarantee that the boxes will always have the same amount of content in them, but that's not always the case. If you try the example above on a mobile phone (or resize the browser window), you will see that the second box's content will be displayed outside of the box.</p>
<p>Go back to the tutorial and find another solution, if this is not what you want.</p>
</body>
</html>
但是,这不是很灵活。如果您能保证盒子中的内容始终相同,那就可以了。 但很多时候,内容并不一样。如果您在手机上尝试上面的示例,您会看到第二个 盒子的内容将显示在盒子之外。 这就是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸 盒子与最长的盒子一样长:
使用Flexbox创建灵活的盒子:
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container .box {
background-color: #f1f1f1;
width: 50%;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container">
<div class="box">Box 1 - This is some text to make sure that the content gets really tall. This is some text to make sure that the content gets really tall.</div>
<div class="box">Box 2 - My height will follow Box 1.</div>
</div>
<p>Try to resize the browser window to see the flexible layout.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>
</body>
</html>
提示:您可以在我们的 CSS Flexbox 章节中了解有关 Flexbox 布局模块的更多信息。
您还可以使用 float
和超链接列表来创建水平菜单:
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
使用 float
属性进行整个网页布局也很常见:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content:
"";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
background-color: white;
}
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="clearfix">
<div class="column menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="column content">
<h1>The City</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 web layout and responsive web pages in a later chapter.</p>
</div>
</div>
<div class="footer">
<p>Footer Text</p>
</div>
</body>
</html>
让图像在段落中浮动到右侧。为图像添加边框和边距。
带有边框和边距的图像在段落中向右浮动
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
border: 1px dotted black;
margin: 0px 0px 15px 20px;
}
</style>
</head>
<body>
<h2>Let an image float to the right in a paragraph</h2>
<p>In the paragraph below, the image will float to the right. A dotted black border is added to the image.
We have also added margins to the image to push the text away from the image:
0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin on the left side of the image.
</p>
<p><img src="w3css.gif" width="100" height="140">
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>
</body>
</html>
让带有标题的图像向右浮动。
带有向右浮动标题的图像
<!DOCTYPE html>
<html>
<head>
<style>
div {
float: right;
width: 120px;
margin: 0 0 15px 20px;
padding: 15px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<h2>Let an image with a caption float to the right</h2>
<p>In the paragraph below, the div element is 120 pixels wide and it contains the image. The div element will float to the right. Margins are added to the div to push the text away from the div. Borders and padding are added to the div to frame in the picture and the caption.</p>
<div>
<img src="w3css.gif" width="100" height="140"><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>
</body>
</html>
让段落的第一个字母向左浮动并设置字母样式。
让段落的第一个字母向左浮动
<!DOCTYPE html>
<html>
<head>
<style>
span {
float: left;
width: 0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
</style>
</head>
<body>
<h2>Style the first letter of a paragraph and let it float left</h2>
<p>
<span>H</span>ere, the first letter of this text is embedded in a span element. The span element has a width that is 0.7 times the size of the current font. The font-size of the span element is 400% (quite large) and the line-height is 80%. The font of the letter in the span will be in "Algerian".
</p>
</body>
</html>
使用 float 创建一个带有导航栏、页眉、页脚、左侧内容和主要内容的主页。
创建一个带有浮动的网站
<!DOCTYPE html>
<html>
<head>
<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">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">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>Footer Text</p>
</div>
</body>
</html>
定义如何计算元素的宽度和高度:是否包含内边距和边框
指定浮动元素旁边的元素应该发生什么 元素
指定元素是否应向左、向右浮动或不浮动 全部
指定如果内容溢出元素的框会发生什么
指定当内容的左/右边缘溢出元素的内容区域时如何处理
指定当内容的顶部/底部边缘溢出元素的内容区域时如何处理