Mga Halimbawa ng Floating ng CSS

Ang pahinang ito ay nagbibigay ng karaniwang halimbawa ng floating.

Grid / Ang kahon na may parehong lapad

Box 1
Box 2
Box 1
Box 2
Box 3

Sa pamamagitan ng paggamit ng float Ang attribute, ay madaling magpapatong ng floating content kahon:

Halimbawa

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Tatlong kahon (apat na kahon ay gumagamit ng 25%, dalawang kahon ay gumagamit ng 50%, at iba pa) */
  padding: 50px; /* Kung kailangan magdagdag ng puwang sa pagitan ng mga larawan */
}

Subukan nang personal

Ano ang box-sizing?

Maaari kang madaling gumawa ng tatlong kahon na magkakasama. Subalit kapag nagdagdag ka ng ilang nilalaman upang palakihin ang lapad ng bawat kahon (halimbawa, padding o border), ang kahon ay masira. box-sizing Ang attribute na ito ay nagbibigay ng kapangyarihan sa amin na kasama ang padding at border sa kabuuan ng lapad (at taas) ng kahon, upang matiyak na mananatili ang padding sa loob ng kahon at huwag lumabas.

Maaari mong makita sa aming CSS Box Sizing Sa kaniyang kabanata na ito, matututunan ka ng higit pang kaalaman tungkol sa attribute na box-sizing.

Mga larawan na magkakasama

Ang ganitong kadi (The grid of boxes) ay maaaring magamit upang ipakita ang mga larawan na magkakasama:

Halimbawa

.img-container {
  float: left;
  width: 33.33%; /* Tatlong kahon (apat na kahon ay gumagamit ng 25%, dalawang kahon ay gumagamit ng 50%, at iba pa) */
  padding: 5px; /* Kung kailangan magdagdag ng puwang sa pagitan ng mga larawan */
}

Subukan nang personal

Ang kahon na may parehong lapad

Sa halimbawa na ito, natutuhan mo kung paano magpapatong ng parang pagtanggap ang kahon. Subalit hindi madaling gumawa ng kahon na may parehong taas. Gayunpaman, ang mabilis na solusyon ay itakda ng isang tiyak na taas, tulad ng sa halimbawa na ito:

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

Halimbawa

.box {
  height: 500px;
}

Subukan nang personal

Ngunit, sa ganitong paraan, nawala ang flexibility. Kung makapag-angkinan kayo na ang laman sa loob ng bawat kahon ay magkapareho, maari ito. Ngunit karamihan sa lahat, ang laman ay magkakaiba. Kung kayo ay magsubukan ang nakaraang halimbawa sa mobile, makakita kayo na ang laman ng ikalawang kahon ay lalabas sa labas ng kahon. Ito ang pinaka-tama na gamitin ang CSS3 Flexbox - dahil ito ay maaaring awtomatikong palakihin ang kahon upang maging katumbas ng pinakamalalim na kahon:

Halimbawa

Gamitin ang Flexbox upang gumawa ng flexible box:

Box 1 - Ito ay ilang teksto, upang siguraduhin na ang nilalaman ay talagang napakataas. Ito ay ilang teksto, upang siguraduhin na ang nilalaman ay talagang napakataas. Ito ay ilang teksto, upang siguraduhin na ang nilalaman ay talagang napakataas. Ito ay ilang teksto, upang siguraduhin na ang nilalaman ay talagang napakataas. Ito ay ilang teksto, upang siguraduhin na ang nilalaman ay talagang napakataas.
Box 2 - Ang aking taas ay sumusunod sa box 1.

Subukan nang personal

Ang tanging problema ng Flexbox ay hindi ito gumagana sa Internet Explorer 10 o mas maaga. Maaari kayong makita sa aming CSS Flexbox Sa section na ito, mas matututunan pa ninyo ang mga kalusugan ng Flexbox layout module.

Navigation Menu

Ilagay float Gamitin ang mga hyperlinks list upang gumawa ng horizontal menu:

Halimbawa

Subukan nang personal

Halimbawa ng Web layout

Gamitin float Ang paggamit ng atributo upang tapusin ang buong Web layout ay pangkaraniwan:

Halimbawa

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

Subukan nang personal

Higit pang mga halimbawa

Mag-float ang imahe na may border at padding sa kanang bahagi ng paragrapo
Hayaan ang imahe na mag-float sa kanang bahagi ng paragrapo. Agad ang border at padding sa imahe.
Mag-float ang imahe na may titik sa kanang bahagi
Hayaan ang imahe na may titik na mag-float sa kanan.
Hayaan ang unang titik ng paragrapo na mag-float
Hayaan ang unang titik ng paragrapo na mag-float at itatago ang estilo ng titik na iyon.
Gamitin ang floating upang gumawa ng website
Gamitin ang floating upang gumawa ng pahina na may horizontal navigation bar, header, footer, left navigation bar at main content.

Lahat ng CSS floating properties

Atributo Paglalarawan
box-sizing Tinukoy ang paraan ng pagtitingin sa lapad at taas ng elemento: kung ang mga padding at border ay dapat kasama o hindi.
clear Specify which elements can float next to the cleared element and on which side.
float Specify how the element should float.
overflow Specify what will happen if the content overflows the element box.
overflow-x Specify how to handle the left/right edge of the content area when the content of the overflow element is specified.
overflow-y Specify how to handle the top/bottom edge of the content area when the content of the overflow element is specified.