Articles
Panimula sa CSS
Mga Katangian sa CSS na May Kaugnayan sa Float

Mga Katangian sa CSS na May Kaugnayan sa Float

Ang artikulong ito ay nagpapaliwanag ng mga katangian ng CSS na may kaugnayan sa float.

Matututuhan mo ang tungkol sa paggamit at sintaks ng mga katangian ng float at clear.

YouTube Video

HTML para sa Preview

css-float.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-float.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Layout</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>float</h3>
23            <section style="height: auto; color: black;">
24                <header><h4>float: left</h4></header>
25                <section class="sample-view">
26                    <div class="float-left">float left</div>
27                    <div class="content">
28                        <p>
29                            paragraph 1-1
30                            paragraph 1-2
31                        </p>
32                        <p>paragraph 2</p>
33                    </div>
34                    <div class="clearfix"></div>
35                </section>
36            </section>
37            <section style="height: auto; color: black;">
38                <header><h4>float: right</h4></header>
39                <section class="sample-view">
40                    <div class="float-right">float right</div>
41                    <div class="content">
42                        <p>
43                            paragraph 1-1
44                            paragraph 1-2
45                        </p>
46                        <p>paragraph 2</p>
47                    </div>
48                    <div class="clearfix"></div>
49                </section>
50            </section>
51        </article>
52    </main>
53</body>
54</html>

Mga Katangian sa CSS na May Kaugnayan sa Float

Mga katangian ng float at clear 

 1.content {
 2    width: 300px;
 3    height: 100px;
 4}
 5
 6.content p {
 7    background-color: lightblue;
 8    margin: 10px;
 9}
10
11.float-left {
12    float: left;
13    width: 150px;
14    margin-right: 20px;
15    background-color: lightblue;
16}
17
18.float-right {
19    float: right;
20    width: 150px;
21    margin-right: 20px;
22    background-color: lightblue;
23}
24
25.clearfix {
26    clear: both;
27    display: none;
28}

Ang float ay isa sa mga katangian ng CSS na ginagamit upang i-float ang isang elemento sa kaliwa o kanan sa loob ng parent element nito, na nagpapahintulot sa ibang mga elemento na bumalot dito. Karaniwang ginagamit ang katangiang float upang ilagay ang mga larawan o mga kahon ng elemento sa paligid ng teksto, ngunit bumababa na ang paggamit nito habang ang mas makabagong mga layout tulad ng flex at grid ay naging karaniwan.

  • Sa klase ng float-left, ang katangiang float ay itinakda sa left. Ang inilapat na elemento ay magf-loat sa kaliwang bahagi ng parent element, at ang susunod na elemento ay bumabalot sa kanan.
  • Ang float-right na klase ay nagse-set ng float na property sa right. Ang elementong ginamitan nito ay lumulutang sa kanang bahagi ng parent nito, at ang susunod na elemento ay bumabalot sa kaliwang bahagi.
  • Sa klase ng clearfix, ang katangiang clear ay itinakda sa both. Ang paggamit ng klase na ito ay pumipigil sa susunod na elemento na bumalot sa elemento na naka-float.

Paano gamitin ang float

Mga Halaga
  • left: Ipinaploat ang elemento sa kaliwa, na nagpapahintulot sa ibang elemento na bumalot sa kanan.
  • right: Ipinaploat ang elemento sa kanan, na nagpapahintulot sa ibang elemento na bumalot sa kaliwa.
  • none: Ito ang default na halaga at hindi ipinaploat ang elemento.
  • inherit: Minamana ang halaga ng float mula sa parent element.
Katangian ng clear
  • Kapag gumagamit ng float, maaaring bumalot ang susunod na elemento sa naka-float na elemento. Upang maiwasan ito, ang katangiang clear ang ginagamit. Ang mga halaga para sa clear ay ang mga sumusunod:.
    • left: Iniiwasan ang mga elementong naka-float sa kaliwa.
    • right: Iniiwasan ang mga elementong na-float sa kanan.
    • both: Iniiwasan ang mga elementong na-float sa parehong kaliwa at kanan.
    • wala: Pinapayagan ang mga elemento na pumaligid. Ito ang default na halaga.

Mga Tala

  • Kapag gumagamit ng float, maaaring magkaroon ng isyu kung saan hindi pinapansin ng taas ng parent na elemento ang taas ng na-float na elemento. Upang maiwasan ito, gamitin ang clearfix na teknika o overflow: hidden; sa parent na elemento.
  • Sa responsive na disenyo o masalimuot na layout, maaaring mas mahirap i-handle ang float kumpara sa flex o grid, kaya't inirerekomenda ang paggamit ng flex o grid.
Buod

Ang float ay isang lumang paraan para i-float ang mga elemento sa kaliwa o kanan, pinapahintulutan ang teksto o iba pang elemento na magbalot sa paligid, at minsan pa ring ginagamit para sa simpleng layout o pagbabalot ng larawan. Gayunpaman, para sa paggawa ng higit na flexible at mas madaling layout, inirerekomenda ang flexbox o grid.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga Katangian ng CSS na Kaugnay sa User InterfacePangkalahatang-ideya ng Responsive Design sa CSS