Bagaimana untuk menulis css left float

Dengan menggunakan apungan sifat CSS: kiri;, elemen boleh diapungkan ke tepi kiri bekasnya, keluar daripada aliran dokumen biasa dan diletakkan bersebelahan secara mendatar. Langkah khusus termasuk: Cipta elemen bekas untuk memegang elemen terapung. Tambahkan apungan: kiri; atribut kepada gaya elemen yang anda mahu terapung. Gunakan atribut clear: both; untuk mengosongkan apungan untuk mengelakkan gangguan dengan elemen di bawahnya.

Kaedah menulis terapung kiri CSS

Apakah terapung kiri?

Float ialah sifat CSS yang membenarkan elemen dialihkan daripada aliran dokumen biasa dan diletakkan secara mendatar bersebelahan. Terapung kiri mengapungkan elemen ke tepi kiri bekasnya.

Bagaimana menulis CSS terapung kiri?

Untuk mencipta elemen terapung kiri menggunakan CSS, gunakan sifat berikut:

<code class="css">float: left;</code>

Tambahkannya pada gaya elemen yang anda mahu terapung.

Arahan terperinci:

1. Mencipta bekas:Pertama, anda perlu mencipta elemen bekas untuk memegang elemen terapung. Ini akan memastikan elemen terapung kekal bersama dalam aliran dokumen.
2. Unsur terapung: Tambah atribut float: left; pada gaya elemen yang anda mahu terapung. Ini akan menyebabkan elemen terlepas daripada aliran dokumen biasa bekas dan terapung ke tepi kiri. float: left; 属性添加到要浮动的元素的样式中。这将使元素从容器的正常文档流中脱离并浮动到左边缘。
3. 清除浮动：浮动元素会破坏其下方元素的正常文档流。为了防止这种情况，需要在容器中添加一个清除浮动的元素。这可以是使用 clear: both; 属性的空 <div>

Apung Kosong:

Unsur terapung mengganggu aliran dokumen biasa unsur di bawahnya. Untuk mengelakkan ini, tambahkan elemen apungan yang jelas pada bekas. Ini boleh menjadi elemen <div> kosong menggunakan atribut clear: both;.

🎜Contoh kod: 🎜🎜

<code class="html"><div class="container">
  <div class="left-float">左浮动元素 1</div>
  <div class="left-float">左浮动元素 2</div>
  <div style="clear: both;"></div>
</div></code>

<code class="css">.container {
  width: 100%;
}

.left-float {
  float: left;
}</code>

Atas ialah kandungan terperinci Bagaimana untuk menulis css left float. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!