CSS中float和Clear的使用-阿里云开发者社区

开发者社区> 云原生> 正文

CSS中float和Clear的使用

简介:     CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容器的边界,或其前面的float对象的边界,而紧随其后的非float对象或内容,则包围在其相反的方向。

 

 

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 語法範例
box {  float:left;  clear:left; }
此範例的意思是清除 box 區塊左方的浮動元素。
CSS clear 可以的值有 left(清除左邊浮動區塊)、right(清除右邊浮動區塊)、both(清除兩邊浮動區塊)、none(預設就是這個,兩邊都可以有浮動區塊)最後還有 inherit(繼承),但是因為 IE 支援度的原因,所以我沒在使用  inherit 這個值

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云原生
使用钉钉扫一扫加入圈子
+ 订阅

云原生时代,是开发者最好的时代

其他文章