今天完成的事：

主要是对一些学习过程中理解不透彻的东西查找资料加以理解。

行内元素：

1.行内元素会在一条直线上排列，在同一行从左至右水平排列。直到一行排不下，才会换行。

2.行内元素设置宽，高，margin上下，padding上下无效（垂直无效）。

3.行内元素是指line-height，margin左右，padding左右有效（左右有效）。

4.行内元素的宽高随标签内容而变化。

行内元素转化为块级元素：diaplay：block（字面意思表现形式设为块级）

--------------------------------------------------------------------------

块级元素：

1.块级元素各自占据一行，垂直方向排列。

2.块级元素可以设置width,height,padding,margin。

3.块级元素可以包含跨级元素和行内元素，但是行内元素不能包含块级元素。

------------------------------------------------------------------------------

display属性：display属性规定元素应该生成的框的类型。

1.display：inline-block    可以让元素具有块级元素和行内元素的特性，即可以设置宽高，也可让margin，padding生效，又可以和其他行内元素并排。

行内块元素对应：display：inline-block

2.块级元素对应：display：biock

3.行内元素对应：display：inline

可以通过修改元素的display属性来切换行内元素和块级元素。

-----------------------------------------------------------------------------

HTML中清除浮动的方法

方法一.（使用空标签带clear属性）标签可以是div br hr。在浮动元素后使用一个空元素如<div class="clear"></div>,并在css中赋予 .clear {clear:both;}属性即可清理浮动。亦可以使用<br class="clear" />或<hr class="clear" />来进行清理。

优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护

-------------------------------------------------------------------------------------------------------

方法二（给浮动元素的父元素添加overflow属性）（zoom:1）

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可!overflow:auto;是让高度自适应，zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决，注意，zoom不符合W3C标准。overflow:hidden也可以实现。<ul style="overflow:auto;zoom:1><li>AAA</li><li>BBB</li><li>CCC</li></ul>

------------------------------------------------------------------------------

方法三：（给浮动的元素的容器添加浮动）
<!--为父级添加float来清楚浮动-->

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

---------------------------------------------------------------------------------------------------------------------------------------------------

方法四： （使用after伪对象清除浮动）after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。通过after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格""或点"."，并且赋予clear属性来清除浮动。

--------------------------------------------------------------------------------------------------

方法五：使用邻接元素处理
什么都不做，给浮动元素后面的元素添加clear属性。
方法与添加一个空标签类似，只是此处用浮动元素紧邻的元素

在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。

最后可以使用相对完美的:after伪元素方法清理浮动，文档结构更加清晰

明天计划的事：尝试使用flex属性，完成task5的页面布局.

收获：学习了html中清除浮动的集中方法。