web前端：css 关于浮动float的使用以及清除浮动

作者:MilankundeA 更新于： 2020-03-13 22:13:45

　　css的识别符也需要用反斜杠"\\"规避特殊字符，这些规避字符遵循IS010646规范。特殊字符的规避方法有两种:第一种方法是遇到特殊字符则在这些字符前直接添加反斜杠，例如，"AT&T"变为"AT\\&T";另一种方法为用反斜杠和Unicode或IS010646等值的十六进制数值一起，规避特殊字符，例如，"AT&T"变为"AT\\26T"。

　　float：none|left|right

　　默认值：none

　　适用于：所有元素

　　none：设置对象不浮动left：设置对象浮在左边right：设置对象浮在右边

　　当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。

　　float在绝对定位和display为none时不会被应用。

　　什么时候用浮动？--让元素变成一行，水平布局时、需要文本环绕效果时

　　浮动的特点，半脱离文档流，且会对后面的元素产生影响。

　　1、父级没有设置高度的时候，会出现塌陷

　　2、父级的宽度不够，会换行排列

　　3、改变元素类型变成行内块

　　清除浮动float的三种方法

　　对后面的元素进行操作。

　　给后面元素添加，clear：both;

　　1.1额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

　　2触发BFC效果。

　　通过触发BFC方式，实现清除浮动

　　父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

　　3对父元素进行操作.

　　3.1父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

　　3.2使用after伪元素清除浮动（推荐使用）

　　3.3使用before和after双伪元素清除浮动

　　CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于html网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。