今日完成的事情

任务6 7细节补全

1.下拉按钮组中间距不均分问题

解决方法：设置width：33%

2.投票页面尾部白线宽度问题

解决方法，首先footer添加flex布局，column走向，footer中加一个盒子高度设定好，上边白色，flex-grow设置为1，外边距设定为rem为单位解决

3.任务后深度思考学习

清除浮动的方法

1.clear属性

left:元素左侧不允许有浮动元素

right:元素右侧不允许有浮动元素

both:元素左右两侧均不允许有浮动元素

none:默认值，允许浮动元素出现在两侧

2.给浮动元素父级设置高度

高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了.

缺点：在浮动元素高度不确定的时候不适用

3.以浮制浮（父级同时浮动）

缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题。

计算BFC的高度时，浮动元素也参与计算(BFC的定义:浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

4.br 清浮动

br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的。

5.使用AFTER伪元素

通过父元素的::after伪元素来生成浮动元素的兄弟元素，然后兄弟元素使用clear:both方法。

ps常见问题

使用after伪元素清除浮动不生效？

   解决措施

clear只对block元素起作用

需要对产生高度塌陷的元素使用after（父级元素），而不是浮动的元素本身

深度思考2 

display和visiblity有什么区别？

visibility隐藏后，仍然占据空间（效率高，不经常用）

display隐藏后，不占据空间（效率低，经常用）

明日计划

开始任务8的学习