首页 > 代码库 > CSS中float和Clear的使用
CSS中float和Clear的使用
CSS中float和Clear的使用
本文和大家重点讨论一下CSS中Float和Clear属性的使用，一个float对象可以居左或居右，一个设置为float的对象，将根据设置的方向，左移或右移到其父容器的边界，或其前面的float对象的边界，而紧随其后的非float对象或内容，则包围在其相反的方向。
CSS中Float和Clear属性用法
实现多栏排版的最好方法是使用float属性，float也是一个将使你受益匪浅的属性。一个float对象可以居左或居右，一个设置为float的对象，将根据设置的方向，左移或右移到其父容器的边界，或其前面的float对象的边界，而紧随其后的非float对象或内容，则包围在其相反的方向。
以下是使用float和clear属性的一些重要准则:
◆一个float对象，将从其置身的block级非float内容流中跳出，换句话说，如果你要将一个box向左边float，它后面的block级非float对象会显示到下方，inline级内容会在旁边包围
◆要让一段内容从一侧包围一个float对象，这段内容必须要么是inline级的，要么也设置为相同方向的float
◆一个float对象，如果没有设置宽度，则会自动缩成其包含的内容的宽度，因此最好为float对象明确设置宽度
◆一个设置了clear属性的对象，将不会包围其前面的float对象
◆一个既设置了clear又设置了float属性的对象，只有clear:left属性生效，clear:right不起作用
CSS clear 用法介紹
clear 是用來清除某一元素的側邊浮動元素，假設兩個 div 區塊使用了浮動（CSS float）而併排在一起，如果要讓這兩個元素不要併排在一起，則可以使用 clear 來宣告清除 CSS float 浮動效果，以下範例圖片所示。
左邊藍色區塊與右邊綠色的區塊，我們使用了 float 讓左右兩的區塊可以水平排在一起，如果你不需要綠色區塊浮動在藍色區塊的右邊，這時候可以在綠色區塊的 style 加上 clear:left 這樣的寫法，意思是清空綠色區塊左邊的浮動區塊，呈現效果就會像下方這樣。
當綠色區塊用 clear 清除掉左邊的浮動區塊之後，等於是讓 float:left 失效，就自然而然的往下方排列囉！
CSS clear 語法範例
CSS clear 可以的值有 left（清除左邊浮動區塊）、right（清除右邊浮動區塊）、both（清除兩邊浮動區塊）、none（預設就是這個，兩邊都可以有浮動區塊）最後還有 inherit（繼承），但是因為 IE 支援度的原因，所以我沒在使用 inherit 這個值
左邊藍色區塊與右邊綠色的區塊，我們使用了 float 讓左右兩的區塊可以水平排在一起，如果你不需要綠色區塊浮動在藍色區塊的右邊，這時候可以在綠色區塊的 style 加上 clear:left 這樣的寫法，意思是清空綠色區塊左邊的浮動區塊，呈現效果就會像下方這樣。
當綠色區塊用 clear 清除掉左邊的浮動區塊之後，等於是讓 float:left 失效，就自然而然的往下方排列囉！
CSS clear 語法範例
box { float:left; clear:left; }
此範例的意思是清除 box 區塊左方的浮動元素。CSS clear 可以的值有 left（清除左邊浮動區塊）、right（清除右邊浮動區塊）、both（清除兩邊浮動區塊）、none（預設就是這個，兩邊都可以有浮動區塊）最後還有 inherit（繼承），但是因為 IE 支援度的原因，所以我沒在使用 inherit 這個值
CSS中float和Clear的使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。