CSS Float(floating)
CSS Float
##What is CSS Float?
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: <!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="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="95" height="84" />
人生如梦，亦哭亦歌，叶凋零，落叶随水流。水冰凉，曲终人已散。漪沫温婉，敛眸芬芳，轻拾一抹文字的清香，在时光的水墨里，听一段心灵，撷一段清澈;在心与心的重逢，心与心的微笑，阔一别红尘纷扰，素年锦时，这何尝不是一种最美的守候。人生在世，为求知己。吾无知己，甚感孤独。 为求知己，吾已踏千山，走万水。 惜无人知吾，无人解吾。 甚难受，乃，莫过于父母同不知吾心。 何人能知吾，吾心孤独。 知己?何君是也?
</p>
</body>
</html>Run the program to try itwith each other Adjacent Floated Elements
If you put several floated elements together, they will be next to each other if there is space. Here we use the float attribute for the image gallery: <!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="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="80">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="116" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="120" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="80">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="116" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="120" height="90">
</body>
</html>Run the program to try itClear the float - use clear
After the 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 a picture gallery to the text: <!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="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="80">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="116" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="80">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="116" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="120" height="90">
</body>
</html>Run the program and try itMore examples
Let the first letter of the paragraph float to the left <!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>
</body>
</html>Run the program and try itExample
Use float to create a web page header, footer, left content and main content.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
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;
}
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">w3cschool.cc</h1></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">
<h2>Free Web Building Tutorials</h2>
<p>At w3cschool you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>w3cschool - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>
</body>
</html>Run the program and try it
All floating properties in CSS
The numbers in the "CSS" column indicate different CSS versions (CSS1 or CSS2) definitions this attribute.
| Properties | Description | Value | CSS |
|---|---|---|---|
| clear | Specifies that floating elements around the element are not allowed. | left Right both none inherit | 1 |
| float | Specifies whether a box (element) can float. | left Right none inherit | 1 |
##
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
