float样式属性
设置元素浮动方向, 该属性有多个值:
为什么使用float
float样式属性:HTML代码编写过程中需要注意代码规范,代码错落有致即是其中最基本的要求,但是浏览器会将换行代码之间多个空格解释为一个空格,但是这一个空格有时会破坏整个页面布局
先来看两个代码
依据代码格式要求,将代码换行,浏览器默认会解释为一个空格,怎么样去掉空格?用float
怎么使用float
float的简单使用
上述例子中出现空格,破坏整个页面布局后,如何解决呢?通过子元素浮动即可解决
先看如下代码,用float就可以消除浮动了,这里要注意两个span都需要设置浮动
接着我们将上述span标签置于一个div标签中后,发现span标签并没有在div内,这是因为浮动后,div中没有内容
消除浮动
看如下代码
写一个空的div标签后可以消除浮动
总结float:
1,以往该属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动;,
2,浮动元素会生成一个块级框,而不论它本身是何种元素;
3,如果浮动非替换元素,则要指定一个明确的宽度,否则它们会尽可能地窄;
4,假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止
clear样式属性
用于设置元素的哪个边上不允许出现浮动元素,该属性有多个值:
消除浮动方法1
看一个例子,如下代码
浮动之后会影响到后边的代码,所以上边span也要消除浮动
消除浮动方法2
先定义一种选择器(可以是id选择器,也可以是class选择器),再消除浮动,如下代码
注意
1,不要为父元素设置高度,否则无需clear
2,一般借助:after伪元素清除浮动
3,CSS1和CSS2是通过自动为设置clear属性的元素增加上外边距实现的;在CSS2.1中,会在元素外边距之上增加清除空间;而外边距本身并不改变;不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素上外边框边界刚好在该边上浮动元素的下外边距边界之下;