CSS Float(float)

CSS Float

Apakah CSS Float?

CSS Float akan menggerakkan elemen ke kiri atau kanan, dan elemen sekeliling juga akan disusun semula.

Float sering digunakan untuk imej, tetapi ia juga sangat berguna dalam reka letak.

Bagaimana elemen terapung

Elemen terapung secara mendatar, yang bermaksud elemen itu hanya boleh bergerak ke kiri dan kanan tetapi tidak ke atas dan turun.

Elemen terapung akan bergerak sejauh kiri atau kanan yang mungkin sehingga tepi luarnya menyentuh sempadan kotak yang mengandungi atau kotak terapung lain.

Elemen yang mengikuti elemen terapung akan mengelilinginya.

Elemen sebelum elemen terapung tidak akan terjejas.

Jika imej terapung ke kanan, aliran teks berikut akan membungkusnya ke kiri:

       <!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>

Jalankan atur cara untuk mencubanya

satu sama lain Elemen Terapung Bersebelahan

Jika anda meletakkan beberapa elemen terapung bersama, ia akan bersebelahan jika ada ruang.

Di sini kita menggunakan atribut apungan untuk galeri imej:

     <!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>

Jalankan program untuk mencubanya

Kosongkan apungan - gunakan Selepas elemen clear

diapungkan, elemen sekeliling akan disusun semula Untuk mengelakkan ini, gunakan atribut jelas. Atribut

jelas menyatakan bahawa unsur terapung tidak boleh muncul pada kedua-dua belah elemen.

Gunakan atribut yang jelas untuk menambah galeri imej pada teks:

     <!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>

Jalankan program untuk mencubanya

Lagi contoh

Biarkan huruf pertama perenggan terapung ke kiri

      <!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>

Jalankan program untuk mencubanya

Contoh

Gunakan apungan untuk mencipta pengepala halaman web, pengaki, kandungan kiri dan kandungan utama.

       <!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>

Jalankan atur cara untuk mencubanya

Semua sifat terapung dalam CSS

Nombor dalam lajur "CSS" menunjukkan versi CSS yang berbeza (CSS1 atau CSS2 ) mentakrifkan atribut ini.

属性	描述	值	CSS
clear	指定不允许元素周围有浮动元素。	left right both none inherit	1
float	指定一个盒子（元素）是否可以浮动。	left right none inherit	1

bahagian seterusnya

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh