html和css基础--float属性给父元素带来的问题及方案

float浮动引发的特殊效果：

                     1、父元素中，如果显示不下所有的已浮动子元素，最后一个会换行，有可能会被卡住

                     2、元素一旦浮动起来之后，元素宽度将由内容来决定(非指定情况下)

                     3、元素一旦浮动起来之后，那么都将变成块级元素，尤其对行内元素影响较大

                            块级元素：允许修改尺寸

                            行内元素：不能修改尺寸

                     4、文本，行内元素，行内块元素 是采用环绕的方式来排列的，不会被浮动元素压在低下，而会巧妙的避开浮动元素

清除浮动：属性：clear：none/ left/ right/both

@清除浮动所带来的影响：

元素一旦浮动起来，会对后面的元素带来位置的影响，如果后面的元素不想被影响的话，可以通过 "清除" 的方式 来解除影响

@浮动元素对父元素的影响：

由于浮动元素会脱离文档流，所以会导致元素不占据空间.如果一个元素中所有的子元素全部都是浮动的，那么该元素的高度就是 0 ，父元素的高度，是以未浮动元素的高度为准

                     解决方案：

                            1、直接设置父元素的高度

                                   弊端：必须要知道父元素的高度

                            2、设置父元素也浮动

                                   弊端：对后续元素时有位置影响的

                            3、为父元素设置 overflow 取值为 hidden 或 auto

                                   弊端：如果有要溢出显示的内容，也一同被隐藏

                            4、第一种：在父元素的最后一个子元素位置处，增加 一个空块级元素，并且设置其 clear:both：

5.第二种方法：

#d0:after{

            content: "";

            display: block;

            clear: both;}

              1、最后一个子元素位置处添加一个空的div，如父元素id为#d0

                            为父元素添加 :after(内容生成属性)

                  2、空子元素:生成空元素

                            content:"";

                     3、设置块级元素

                            display:block;

                     4、清除clear:both

                            clear:both;