CSS第四天-浮动

浮动（float）：

属性名	效果
float：left	左浮动
float：right	右浮动

让垂直布局的盒子变成水平布局
浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中

伪元素：

::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

伪元素：一般页面中的非主体内容可以使用伪元素

before 在元素里面的最前面添加
after 在元素里面的最后面添加
content 必写属性
伪元素添加进来是一个类似行内元素

清除浮动：

1、在标准流的情况下，子元素的高度是可以撑开父元素的

2、一旦子元素浮动了，那么父元素就检测不到子元素，从而导致父元素高度为0

3、那么此时我们就需要清除浮动，让子元素可以把父亲撑开

清除浮动的方法：

第一种：clear: both;
第二种：给父元素设置overflow：hidden 因为触发BFC
第三种：.clearfix::after —谁因为浮动没有高度了，就把这个类名给谁
第四种：双伪类元素 ::before—::after
ie6/7兼容问题—*zoom：1；

方法	优点	缺点
直接设置父元素高度	优点简单粗暴，方便	缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
额外标签法	在父元素内容的最后添加一个块级元素。给添加的块级元素设置 clear:both	会在页面中添加额外的标签，会让页面的HTML结构变得复杂
单伪元素清除法	项目中使用，直接给标签加类即可清除浮动	操作：用伪元素替代了额外标签
双伪元素清除法	项目中使用，直接给标签加类即可清除浮动
给父元素设置overflow : hidden	方便	操作：直接给父元素设置 overflow : hidden

.box::after {
            content: '.';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
            }

结构伪类选择器：

选择器	说明
:first-child	找到父元素的第一个子元素
:last-child	找到父元素的最后一个子元素
:nth-child(n)	找到父元素第n个子元素
:nth-last-child(n)	找到父元素中倒数第n个子元素
:nth-of-type(n)	找到父元素的子元素固定死