16.（初级）CSS布局定位相关问题

一、浮动溢出问题解决方案

方案一：在外层元素的底部添加一个元素，并清除浮动。

方案二：浮动外层元素，后续元素清除浮动。

方案三：设置overflow:hidden;。

方案四：设置伪元素:before、:after。

        div:before/after{

            content:” ”;

            display:table;

            clear:both;

        }

二、z-index

！注意：子代元素的顺序以父元素的顺序为起点

例如：

<div id="a">a
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
</div>

#a{
    position: absolute;
    z-index: 1000;
}
#b,#c,#d{
    position: absolute;
}
#b{
    z-index: 100;
   }
#c{
    z-index: 200;
}
#d{
    z-index: 200;
}

 

以上结果：id=a，z-index=1000，由于id=a为父元素，在最下面。

三、visibility:hidden与display:none的区别

visibility:hidden不显示元素，但占用页面位置。

display:none，元素消失，不占用页面位置。

四、img自适应

img{max-width:100%}