CSS 布局 - 浮动实例

本页提供常见的浮动案例。

网格 / 等宽的框

Box 1
Box 2
Box 1
Box 2
Box 3

通过使用 float 属性，可以轻松地并排浮动内容框：

အကျယ်း

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
  padding: 50px; /* 如果需要在图片间增加间距 */
}

သင့် အားဖြင့် ဖြို့ဖြေခြင်း

什么是 box-sizing？

您可以轻松地并排创建三个浮动框。但是，当您添加一些内容来扩大每个框的宽度（例如，内边距或边框）时，这个框会损坏。 box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。

您可以在我们的 စတုံးစံ Box Sizing 这一章中学习有关 box-sizing 属性的更多知识。

图像并排

这种框格（The grid of boxes）也可以用来并排显示图像：

အကျယ်း

.img-container {
  float: left;
  width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
  padding: 5px; /* 如果需要在图片间增加间距 */
}

သင့် အားဖြင့် ဖြို့ဖြေခြင်း

等宽的框

在上例中，您学习了如何以相等的宽度并排浮动框。但是，创建具有相同高度的浮动框并不容易。不过，快速解决方案是设置一个固定的高度，如下例所示：

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

အကျယ်း

.box {
  height: 500px;
}

သင့် အားဖြင့် ဖြို့ဖြေခြင်း

但是，这么做就失去了弹性。如果可以保证框中始终有相同数量的内容，那是可以的。但是很多时候，内容是不一样的。如果您在手机上尝试上例，则会看到第二个框的内容将显示在框的外部。这是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长：

အကျယ်း

使用 Flexbox 创建弹性框：

Box 1 - 这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。
Box 2 - 我的高度将跟随框 1。

သင့် အားဖြင့် ဖြို့ဖြေခြင်း

Flexbox 的唯一问题是它在 Internet Explorer 10 或更早版本中不起作用。您可以在我们的 စတုံးစံ Flexbox 章节中学习有关 Flexbox 布局模块的更多知识。

လမ်းကြောင်း စားသော အသုံးပြု

ပြုလုပ် float အသုံးပြု၍ အသတ်တူ အဆင့် စားသော စကာတင်း ပုံစံ ကို အသုံးပြု၍ အဆိုပါ အသတ်တူ အဆင့် ကို အသုံးပြုပါ

အကျယ်း

သင့် အားဖြင့် ဖြို့ဖြေခြင်း

ပုံစံ ပျက်စည်းခြင်း အကျယ်း

အသုံးပြု float ပုံစံ ပျက်စည်းခြင်း အား အကောင်းမြတ် သဘော ဖြင့် အုပ်ချုပ်တည်ဆောက်ခြင်း အမြဲ အသုံးပြုကြသည်:

အကျယ်း

.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%;
}

သင့် အားဖြင့် ဖြို့ဖြေခြင်း

အခြား အကျယ်း

အကြိတ် နှင့် အခြား ပေါ်လုံး ပြုလုပ်ပြီး ပုံစံ အရေးယူပါ သည့် အသတ်တူ အဆင့် ကို အရှေ့ဘက် ဝိုက်ချက် သို့ ပျံ့နှံ့စေခြင်း
ပုံစံ အရေးယူပါ သည့် အသတ်တူ အဆင့် ကို အရှေ့ဘက် ဝိုက်ချက် သို့ ပျံ့နှံ့စေခြင်း အပေါ် အကြိတ် နှင့် အခြား ပေါ်လုံး ပြုလုပ်ခြင်း
ပုံစံ အရေးယူပါ သည့် အသတ်တူ အဆင့် ကို အရှေ့ဘက် ဝိုက်ချက် သို့ ပျံ့နှံ့စေခြင်း
ပုံစံ အရေးယူပါ သည့် အသတ်တူ အဆင့် ကို အရှေ့ဘက် ဝိုက်ချက် သို့ ပျံ့နှံ့စေခြင်း
ပုံစံ အရေးယူပါ သည့် အသတ်တူ အဆင့် ကို အရှေ့ဘက် ဝိုက်ချက် သို့ ပျံ့နှံ့စေခြင်း
ပုံစံ အရေးယူပါ သည့် အသတ်တူ အဆင့် ကို အရှေ့ဘက် ဝိုက်ချက် သို့ ပျံ့နှံ့စေခြင်း
ဝိုက်ချက် ကို အသုံးပြု၍ ဝတ္ထု ကို တည်ဆောက်တည်ဆောက်ခြင်း
ဝိုက်ချက် ကို အသုံးပြု၍ အသတ်တူ အဆင့် စားသော စကာတင်း ပုံစံ အား တည်ဆောက်တည်ဆောက်ခြင်း: အဆင့် ၁ ကို ပေါ်ရောက်ခြင်း နှင့် အသတ်တူ အဆင့် ၂ ကို အခြေခံ ပုံစံ

အတိုက်အခံ CSS ဝိုက်ချက် အားလုံး

အချက် ဖော်ပြ
box-sizing အရာဝတ္တံ့ အကျယ် နှင့် အမြင့် ချဲ့မှတ်ခြင်း၏ စနစ်ချက်: သူတို့ ကွင်းအဖက် နှင့် အကြိတ် ကို ပါဝင်သလား?
clear 指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。
float 指定元素应如何浮动。
overflow 指定如果内容溢出元素框会发生什么情况。
overflow-x 指定当溢出元素的内容区域时，如何处理内容的左/右边缘。
overflow-y 指定当溢出元素的内容区域时，如何处理内容的上/下边缘。