Day06-浮动问题处理

一. 本节课学习目标。

1. 掌握浮动产生的问题。
2. 掌握浮动产生问题的处理方案。
3. 了解多种处理方案的区别。
   二. 浮动产生的问题。
4. 如果元素浮动，自身的层级会提升，会对其他没有浮动的同级元素造成影响。
5. 父子结构，如果子元素浮动，会对父元素造成高度塌陷问题，父元素获取不到浮动元素内容高度。
   三．解决方案。
   解决问题1：在被影响的元素上添加css属性clear:both 清除浮动。
   解决问题2：
   1、给塌陷的父元素添加css属性overflow:hidden。
   存在问题：会把超过父元素范围的定位元素隐藏
   2、给父元素设置高度。不推荐
   存在问题：需要手动的对父元素设置高度，如果子元素内容有变化，父元素也需要改动，不动态获取子元素高度。
   3、在浮动元素后边添加一个新的块级元素，对改元素设置css属性clear:both.
   原理：
   1、在想要清除浮动的元素后边添加一个新块元素
   2、对该元素设置css属性：clear:both,height:0px
   4、在父元素的尾部添加一个br标签，br设置clear:both。跟3的解决方式是一样的。
   5、终极解决方案：定义一个类名，在类中定义样式：
   /* 清除浮动 /
   .clearFix:after{
   / 清除浮动 /
   clear: both;
   / 设置内容 /
   content: ‘’;
   display: block;
   / 隐藏:浏览器展示时隐藏,源码中存在 display:none完成隐藏元素 */
   visibility: hidden;
   }

代码：