CSS页面布局

页面布局的种类

1.传统布局float

2.传统布局 display : inline - block 内联块级元素

3、现代布局 dislpay : flex 弹性盒子

页面布局各自存在的问题及解决办法

传统布局 float 

向需要横向布局的元素添加 float 属性其值： left （左浮动） right （右浑动）
存在的问题：使用 float 之后，所在的父级元素无高度，会导致下方元素向上移动
解决办法：
1、给父级元素设置高度（不推荐）
2、给父级元素设置 overflow : hidden ；达到父级高度随自己高度自适应的效果（推荐）
无法解决的问题
1、元素之间均匀分布需要计算，而且不一定均匀分布
2、元素均分父级需要计算，而且不一定实现均分

3、书写繁琐，代码冗余

传统布局 display : inline - block 内联块级元素
向需要横着布局的元素添加 display : inline - block 变为内联块级元素，内联块级元素不独占一行，对宽高
存在的问题：使用之后元素之间产生莫名其妙的空隙，对整体的布局有影响
产生的原因：把换行和空格都当成空白
解决办法：
1、把元素标签首位相连（不推荐）
2、文字大小处理，给使用 display : inline - block 的父级元素设置字体大小为0 font - size :
并且该元素要有有效的字体大小
无法解决的问题
1、元素之间均匀分布需要计算，而且不一定均匀分布
2、元素均分父级需要计算，而且不定实现均分
3、书写繁项，代码冗余