css中的浮动属性

语法: float:none/left/right;

浮动的目的:就是让竖着的元素横着显示

个元素设置float: left/right;时，元素会脱离文档流 (半脱离) ，不占空间:

有三个取值:

left:元素向左浮动

right:元素向右浮动

none:默认值，不浮动

clear:使当前元素不受上边浮动元素的影响,

清除浮动的属性是clear，语法

clear : none  left  right  both

none: 默认值。允许两边都可以有浮动对象

left:当前元素不受上一个左浮动元素的影响

right:当前元素不受上一个右浮动元素的影响

both:当前元素不受上一个左右浮动元素的影响

浮动造成的副作用?

               浮动会造成父元素高度塌陷

解决办法:

                       1.给父元素设置固定高度  优点:简单易懂  缺点:固定高度不灵活,不易于维护

                       2.清楚浮动造成的影响

                           属性名: clear

                           属性值: left  right none不清除  both 左右浮动都清除

                           给被影响的元素添加clear:both

                           优点:代码少

                           缺点:无法解决高度塌陷问题

                           (治本不治标)

                       3.在浮动元素的最后位置添加一个空标签,给改标签添加clear:both

                            优点:完全符合语义

                            缺点:生成无意义的代码,代码量多

                       4.给浮动元素的父元素添加伪元素选择器清楚浮动

                              ::after{

                                       content:"";

                                       display:block;

                                       clear: both;

                                      }

                               万能清除浮动

                               市面上清除浮动方法

                               缺点:较难理解

                       5.给浮动元素的父元素添加浮动

                               优点:代码量少

                               缺点:这是一种将错就错的办法,严重影响后续元素的布局

                       6.给父元素添加overflow:hidden (触发BFC特性)

                               优点:简单易懂方便

                               缺点:该属性有自身的使用方法