CSS Layout - Floating and Clearing

CSS Layout - Floating and Clearing

CSS float Ang katangian na ito ay nagtutukoy kung paano ang elemento ay magsisimula.

CSS clear Ang katangian na ito ay nagtutukoy kung aling mga elemento ang maaaring lumagay sa tabi ng pinagwalang-bahagyang elemento at sa anong bahagi.

float katangian

float Ang katangian na ito ay ginagamit upang lokalisahin at formatuhin ang nilalaman, halimbawa, upang pahilagan ang larawan sa kaliwang bahagi ng teksto sa konteyner.

float Ang katangian ay maaaring magtala ng isa sa mga sumusunod na halaga:

  • left - Ang elemento ay magsisimula sa kaliwang bahagi ng kanyang konteyner
  • right - Ang elemento ay magsisimula sa kanang bahagi ng kanyang konteyner
  • none - Ang elemento ay hindi magsisimula (magpapakita sa posisyon kung saan ito ay lumitaw sa teksto). Ang default na halaga.
  • inherit - Ang elemento ay minamana ang halaga ng float ng kanyang magulang

Ang pinakamadaling paggamit nito ay:float Ang katangian na ito ay nagbibigay-daan sa epekto ng pagbawas ng teksto sa paligid ng larawan (sa pahina ng balita).

Halimbawa - float: right;

Sa halimbawa, ang larawan ay dapat magpakita sa kanang bahagi ng teksto kung saan ito ay lumitaw:

Ananás

Leading Web Technology Tutorials - All Free. At CodeW3C.com, you can find all the website construction tutorials you need, from basic HTML to CSS, and even advanced XML, SQL, JS, PHP.

Our reference manual covers all aspects of website technology. This includes W3C standard technologies such as HTML, CSS, XML. And other technologies such as JavaScript, PHP, SQL, etc.

In CodeW3C.com, we provide thousands of examples. By using our online editor, you can edit these examples and experiment with the code.

Example

img {
  float: right;
}

Try It Yourself

Halimbawa - float: left;

Sa halimbawa, ang larawan ay dapat magpakita sa teksto sa lugar kung saan ito ay lumitaw:Sa kaliwaFloat:

Ananás

Leading Web Technology Tutorials - All Free. At CodeW3C.com, you can find all the website construction tutorials you need, from basic HTML to CSS, and even advanced XML, SQL, JS, PHP.

Our reference manual covers all aspects of website technology. This includes W3C standard technologies such as HTML, CSS, XML. And other technologies such as JavaScript, PHP, SQL, etc.

In CodeW3C.com, we provide thousands of examples. By using our online editor, you can edit these examples and experiment with the code.

Example

img {
  float: left;
}

Try It Yourself

Halimbawa - Walang float

Sa halimbawa, ang larawan ay magpapakita sa posisyon kung saan ito ay lumitaw sa teksto (float: none;):

Ananás Leading Web Technology Tutorials - All Free. At CodeW3C.com, you can find all the website construction tutorials you need, from basic HTML to CSS, and even advanced XML, SQL, JS, PHP. Our reference manual covers all aspects of website technology. This includes W3C standard technologies such as HTML, CSS, XML. And other technologies such as JavaScript, PHP, SQL, etc. In CodeW3C.com, we provide thousands of examples. By using our online editor, you can edit these examples and experiment with the code.

Example

img {
  float: none;
}

Try It Yourself

Extended Reading

课外书：CSS Floating