CSS ການອາຍຸ
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
CSS ການອາຍຸ
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
ຍັງມີສິນສະຫຼາດທີ່ສະແດງນອກມາວ່າ ຖ້າບອກບາງຂັ້ນນັ້ນຍັງບໍ່ພຽງພາຍໃຕ້ບາງການວົງວາງທີ່ມີຂະໜາດນ້ອຍ ບອກບາງບັບບັບບັບບັບບັບບັບບັບບັບບັບບັບບັບບັບ
CSS clear
ໃນ CSS ພວກເຮົາໃຊ້ບັບບາງ float ເພື່ອພະຍາຍາມສິ່ງປະກອບສິ່ງຂອງພາບ
ຕ້ອງການຊອກຫາຂໍ້ມູນຂອງບັບບາງ float ຫຼາຍກວ່ານີ້ ກະລຸນາເຂົ້າມາກວາດການຊອກຫາCSS clear。
ບອກບາງແລະການກວດລ້າງ
ບອກບາງທີ່ຢູ່ຂ້າງບອກບາງບັບບັບບັບບັບບັບບັບບັບບັບບັບບັບບັບ
ດັ່ງນັ້ນ ການສ້າງບອກບາງສາຍການສະແດງວ່າຂໍ້ຄວາມທີ່ວົງກັບບາງບາງບາງບາງບາງບາງບາງ
ຈະຢຸດການການໂຕນບອກບາງກັບບອກບາງບາງບັບບາງບັບບັບບັບບັບບັບ clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：
ນັ້ນແມ່ນເຄື່ອງມືທີ່ຈະໃຫ້ສິ່ງທີ່ອ້ອມຮອບສິ່ງຫັນອອກມາມີບ່ອນສະຖານທີ່ນອກມາ.
ນັ້ນແມ່ນເປັນເຄື່ອງມືທີ່ມີປະສິດທິພາບຫຼາຍທີ່ຈະໃຫ້ສິ່ງທີ່ອ້ອມຮອບຂອງສິ່ງຫັນອອກມາມີບ່ອນສະຖານທີ່ນອກມາ.
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
ຕະຫຼາດນີ້ຈະເກີດບັນຫາ. ຍ້ອນວ່າສິ່ງຫັນອອກຈາກແບບຂອງເອກະສານແບບເຫດການບໍ່ມີບ່ອນຕັ້ງຢູ່ສຳລັບ div ວັດຈຳນົງຂອງພາບແລະຂະນະຄວາມຂອງຄຳຂຽນ.
ວິທີທີ່ຈະເຮັດໃຫ້ສິ່ງທີ່ວັດຈຳນົງປະກອບມັນທັງໝົດຈະປະກອບມັນທັງໝົດໃນທາງທິດີນ? ຕ້ອງປຸງ clear ໃນບ່ອນໃດຂອງສິ່ງທີ່ວັດຈຳນົງ:
ແຕ່ວ່າບັນຫາໃໝ່ກໍ່ເກີດຂຶ້ນ. ຍ້ອນວ່າບໍ່ມີສິ່ງທີ່ຈະປຸງມາໃນຂະນະນີ້ແລ້ວພວກເຮົາຈະຕ້ອງເພີ່ມສິ່ງທີ່ບໍ່ມີຄວາມໝາຍແລະປຸງມັນ.
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
ນີ້ຈະເຮັດໃຫ້ພວກເຮົາມີຜົນກະທົບທີ່ຕ້ອງການທັງໝົດແຕ່ຈະຕ້ອງເພີ່ມລະບົບການປັບປຸງຫຼາຍກວ່າ. ບາງຄົນມີເຫດການທີ່ຈະປຸງ clear ສຳລັບສິ່ງທີ່ຈະຈັດວາງແບບແຕ່ບາງຄົນຈະຕ້ອງເພີ່ມສິ່ງທີ່ບໍ່ຈຳເປັນເພື່ອຈັດວາງ.
ແຕ່ວ່າພວກເຮົາຍັງມີວິທີອື່ນໆທີ່ຈະຫັນ div ຂອງຄິດເນີນ:
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
ນີ້ຈະເຮັດໃຫ້ພວກເຮົາມີຜົນກະທົບທີ່ຕ້ອງການ. ແຕ່ວ່າອີກຄັ້ງຢ່າງບໍ່ດີທີ່ປະກອບສິ່ງທີ່ຈະຮັບຜົນມາຈາກສິ່ງຂອງການຫັນ. ເພື່ອແກ້ໄຂບັນຫານີ້ບາງຄົນເລືອກທີ່ຈະຫັນທຸກຢ່າງໃນການຈັດວາງແບບແລະພົບມັນກັບສິ່ງມີຄວາມໝາຍຫຼາຍທີ່ຈະປຸງປູງສິ່ງຂອງ footer ຂອງເວັບໄຊ. ນີ້ຈະຊ່ວຍຫຼຸດລົງຫຼືປັບປຸງສິ່ງທີ່ບໍ່ຈຳເປັນ.
ຄວາມຈິງແລ້ວທຸກໆໜ້າຂອງເວັບໄຊ CodeW3C.com ໄດ້ໃຊ້ເຕັກນິກນີ້ທັງໝົດ，ຖ້າເຈົ້າເປີດເອກະສານ CSS ຂອງພວກເຮົາເຈົ້າຈະເຫັນວ່າພວກເຮົາໄດ້ປັບປຸງ div ຂອງ footer ແລະ div ສາມຂອງຕໍ່ກັບມັນຂຶ້ນຫັນທາງຊ້າຍ.
CSS clear
ພວກເຮົາກ່ອນໜ້ານີ້ໄດ້ການຫາລົງຄວາມເຫັນຂອງການປັບປຸງ CSS ແລະວິທີການຂອງ clear 属性。ຖ້າເຈົ້າຕ້ອງການຮຽນຫຼາຍກວ່າກັບ clear 属性，ກະລຸນາເຂົ້າຊົມປືກສາອີງຕາມ:CSS clear。
浮动和清理 实例
- float 属性的简单应用
- 使图像浮动于一个段落的右侧。
- 将带有边框和边界的图像浮动于段落的右侧
- 使图像浮动于段落的右侧。向图像添加边框和边界。
- 带标题的图像浮动于右侧
- 使带有标题的图像浮动于右侧
- 使段落的首字母浮动于左侧
- 使段落的首字母浮动于左侧，并向这个字母添加样式。
- 创建水平菜单
- 使用具有一栏超链接的浮动来创建水平菜单。
- 创建无表格的首页
- 使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。
- 清除元素的侧面
- 本例演示如何使用清除元素侧面的浮动元素。
