上课后对【css】中清除浮动的总结

           

   浮动是使脱离标准文档流的一种方法，适当的浮动可以较好的排版，但是因为浮动的元素脱标了，会影响后面的布局

   

<div class="father">
           <div class="son"></div>
       </div>
       <p>这是一块天蓝色的区域</p>

盒子的样式

.father{border: 1px solid #000;}
    .son{width: 500px;
        height: 200px;
        background: #00b3ee;
        float: left;}

当想在浮动的区域下方添加一行文字的时候就会出现问题

1.文字没有如期望那样显示在区域下方

2.父盒子没有被撑开

     那要清除这种影响就要清除浮动

     现学的方法有三

①给父盒子设置高度（）

加上高度

.father{border: 1px solid #000;height:100px;}

现在就正常了，但在实际开发中，网页的各个模块大小并不都是固定的，这种方法对后续的维护和拓展人员不友好

②给父盒子一个浮动

   看，又加了一个浮动，可能能解决当前问题，但是无形中自己本身又是一个问题了，所以最好别用

另外貌似也解决不了前面的问题

③给父盒子一个overflow:hidden

.father{border: 1px solid #000;overflow:hidden;}

    效果和方法1一样

   本意是元素溢出部分，隐藏起来，而在这里起清除浮动的作用，能够撑起盒子，盒子高度由内容决定（前提盒子高度为0），可拓展性及友好性大大

增强。

暂时先写这么多，后续更新

【在学习css和html的路上，文章可能很多错误，欢迎给出建议】