国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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: 

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

<body>
<p>在下面的段落中，我們添加了一個 <b>float:right</b> 的圖片。導(dǎo)致圖片將會浮動在段落的右邊。</p>
<p>
    <img src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="95" height="84" />
    人生如夢，亦哭亦歌，葉凋零，落葉隨水流。水冰涼，曲終人已散。漪沫溫婉，斂眸芬芳，輕拾一抹文字的清香，在時光的水墨里，聽一段心靈，擷一段清澈;在心與心的重逢，心與心的微笑，闊一別紅塵紛擾，素年錦時，這何嘗不是一種最美的守候。人生在世，為求知己。吾無知己，甚感孤獨(dú)。 為求知己，吾已踏千山，走萬水。 惜無人知吾，無人解吾。 甚難受，乃，莫過于父母同不知吾心。 何人能知吾，吾心孤獨(dú)。 知己?何君是也?
</p>
</body>

</html>

Run the program to try it

with 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中文網(wǎng)(php.cn)</title>
    <style>
        .thumbnail
        {
            float:left;
            width:110px;
            height:90px;
            margin:5px;
        }
    </style>
</head>

<body>
<h3>圖片庫</h3>
<p>試著調(diào)整窗口,看看當(dāng)圖片沒有足夠的空間會發(fā)生什么。</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 it


Clear 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中文網(wǎng)(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>試著調(diào)整窗口,看看當(dāng)圖片沒有足夠的空間會發(fā)生什么。.</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 it

More examples

Let the first letter of the paragraph float to the left

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(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>
    誰曾說過，有故事的人注定會相遇，不管是以哪種方式。 對有感情不愿虧欠誰，卻還是欠著一些?；蛟S等到?jīng)]了信心時，等到?jīng)]有希望的時候，會悄然撤離.人人都有過等待與被等待的時候。離開永遠(yuǎn)比相遇更容易，因?yàn)橄嘤鍪菐變|人中一次的緣分，而離開只是兩個人的結(jié)局。
</p>



</body>
</html>

Run the program and try it

Example

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

       <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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.

PropertiesDescriptionValueCSS
clear Specifies that floating elements around the element are not allowed. left
Right
? ? ? ? ? ? ? ? ? ? ? ? ? ? both
? ? ? ? ? ? ? ? ? ? none
? ? ? ? ? inherit		1
floatSpecifies whether a box (element) can float. left
Right
? ? ? ? ? ? ? ? ? none
????????????????????? inherit		1




##

Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .thumbnail { float:left; width:110px; height:90px; margin:5px; } </style> </head> <body> <h3>圖片庫</h3> <p>試著調(diào)整窗口,看看當(dāng)圖片沒有足夠的空間會發(fā)生什么。</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>
submitReset Code