网页布局-----2018 09 04

网页整体布局知识点

（1）水平居中：margin:0 auto;

（2）水平浮动：float:left right  ，清除浮动办法：clear:both;

（3）三列布局：利用绝对定位，position:absolute,设置top:0 ;left:0      margint:0 200px 0 300px   top:0;right:0实现水平方向浮动。

（4）清除浮动的好处：在父级元素无百分比时，子元素为浮动的，父级元素会显示不全，此时需要清除浮动，最好的办法是利用after标签，

                                                .parent:after{

                                                    content:"";

                                                    visibility:hidden;

                                                    display:block;

                                                    width:100%;

                                                    height:0;

                                                    clear:both;

                                                }

另外三种不太规范用法：

<div class="parent"> <!-- style="overflow: hidden;" -->

    <div class="f"></div>

    <!--方法一：利用清除浮动，使得父元素被撑起来-->

   <!--  <div style="clear: both;"></div> -->

   <!--方法二：利用br标签-->

   <!-- <br clear="all"> -->

   <!--方法三 父级元素加overflow:hidden-->

</div>