CSS Float(floating)

CSS Float

What is CSS Float?

CSS Float will move the element to the left or right, and the surrounding elements will also be rearranged.

Float (float) is often used for images, but it is also very useful in layout.

#How elements float

The elements float horizontally, which means that the elements can only move left and right but not up and down.

A floating element will try to move left or right until its outer edge touches the border of the containing box or another floating box.

Elements after the floated element will surround it.

Elements before the floated element will not be affected.

If the image is floated right, the following text flow will wrap to the left of it:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
img 
{
	float:right;
}
</style>
</head>

<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="http://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>

Running Example »Click the "Run Example" button to view the online example

Floating elements next to each other

If you put several floating elements on Together, if there is space, they will be next to each other.

Here, we use the float attribute for the image gallery:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

Clear float - use clear

After an element is floated, the surrounding elements will be rearranged. To avoid this, use the clear attribute.

The clear attribute specifies that floating elements cannot appear on both sides of the element.

Use the clear attribute to add an image gallery to the text:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">

<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">

<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">

<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
</body>
</html>

Run Example»

Click the "Run Example" button to view online examples

##More examples

Add borders and margins to the image and float it to Left side of paragraph

Let’s add a border and margin to the image and float it to the left side of the paragraph:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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="http://img.php.cn/upload/article/000/000/015/5c67de683f83a569.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>

Run instance»Click the "Run instance" button to view the online instance

The title and picture float to the right

Let the title and picture float to the right float.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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="http://img.php.cn/upload/article/000/000/015/5c67de683f83a569.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>

Run instance»Click the "Run instance" button to view the online instance

Let the first letter of the paragraph float to the left

Change the style and let the first letter of the paragraph float to the left

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>

Run Example»Click the "Run Example" button to view the online example

Create a web page without a table

Use float creates a web page header, footer, left content, and main content.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>

Run instance »Click the "Run instance" button to view the online instance