CSS——float，clear样式属性

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中，会在元素外边距之上增加清除空间；而外边距本身并不改变;不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素上外边框边界刚好在该边上浮动元素的下外边距边界之下；