关于浮动学习的记录

今天课后练习：
仿b站模块练习。

用到了浮动的相关知识，相关的知识点比较熟练，主要发现的一些问题是关于行高和字体的把握还不够熟练，这个需要更多的练习。

练习模块：

相关代码：
html 代码

css 代码

float浮动的特性：
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、阻止margin叠压

目前所学清除浮动的一些方法及每个方法的原理及优缺点：
1.加高度

        缺点：
            不利于维护
            在内容不确定高度时无法使用

2.inline-block清浮动

        缺点：
            会产生空格间隙
            无法使用margin左右居中

3.空标签清浮动

        缺点：
            必须是非内联元素
            但凡使用到浮动都需要加个空标签

4.以浮制浮

        缺点：
            所有浮动元素的父级都要加浮动
            最终加到HTML上就无法继续清除浮动了

5.<br /> 换行符

        W3C规范
            行为、结构、样式三者分离

        br

        缺点：
            不符合W3C规范

6.after伪类
                    相对完善的清除方式

整体感受
大量的练习及思考是最好的方式
关于思维结构方面，需要有丰富的经验才能驾轻就熟，不过目前主流的结构方式应该大部分在练习题中都有所涉及，所以······写好练习。

关于清除浮动
目前所学的几种方法大体可以归为两类：

1. 触发BFC规则，解决问题。
2. 通过快元素的clear属性，来清除。

关于浮动学习的记录