H5学习之12(html中的使用浮动布局带来的问题和解决方法)

一。使用浮动布局到来的问题

1.问题1：
第一个子级元素未设置浮动时：

如果两个相邻的兄弟块级元素，给第一个元素设置float，那么后面的未设置浮动的块级元素会无视这个浮动元素存在，占据浮动元素原有的空间位置，发生了布局的重叠。

例如：

<div style="width:300px;height:300px;border: 3px solid red;">

   <div style="width:120px;height:100px;background: blue;"></div>

   <div style="width:200px;height:140px;background: yellow;"></div>

</div>

给第一个子级元素设置浮动float:left后：

<div style="width:300px;height:300px;border: 3px solid red;">

   <div style="width:120px;height:100px;background: blue;float: left;"></div>

   <div style="width:200px;height:140px;background: yellow;"></div>

</div>

如果要保证两个子级不相互重叠，就不要给第一个子级元素加浮动(float:left;)

2.问题2:

对于父子级元素，子元素设置了浮动，如果父级元素没有设置固定的高度的话，则会导致父级元素的高度塌陷。

例如：

子级元素没有设置浮动时：

<div style="border: 3px solid red;">

    <div style="width:120px;height:100px;background: blue;"></div>

</div>

如果给子元素设置了浮动float:left;

<div style="border: 3px solid red;">

   <div style="width:120px;height:100px;background: blue;float: left;"></div>

</div>

解决方法:

给父级加一个overflow:hidden就可以解决父级高度塌陷的现象

3.问题3:

给子级设置了浮动，父级设置的背景不显示

子级元素没有设置浮动时：

<div style="border: 3px solid red;background: violet;">

    <div style="width:120px;height:100px;background: blue;"></div>

</div>

如果给子元素设置了浮动float:left;

<div style="border: 3px solid red;background: violet;">

   <div style="width:120px;height:100px;background: blue;float: left;"></div>

</div>

解决方法:

给父级加一个overflow:hidden就可以解决父级高度塌陷的现象，从而设置的背景就能显示出来

4.问题4:

子级设置了浮动，无论给子级元素设置padding值和margin值，父级的边框不能撑开

例如：子级没有设置浮动时：

<div style="border: 3px solid red;background: violet;">

   <div style="width:120px;height:100px;background: blue;padding: 10px; margin: 30px;"></div>

</div>

给子级设置了浮动float:left;后

<div style="border: 3px solid red;background: violet;">

   <div style="width:120px;height:100px;background: blue;float: left;padding: 10px; margin: 30px;"></div>

</div>

解决方法:

给父级加一个overflow:hidden就可以解决父级高度塌陷的现象，父级的高度就会被子级内容的高度撑开

5.问题5:

给父级中的两个子级设置了浮动，子级设置外边距(margin值)不会合并，在没有设置浮动，两个子级设置的外边距是会合并的，取值为较大的那个值

例如两个子级都没有设置浮动；

<div style="width: 300px;height: 400px;border: 3px solid red;padding: 10px;">

   <div style="width: 200px;height: 100px;background: blue;padding:100px 30px 0px;margin: 25px;"></div>

   <div style="width: 200px;height: 100px;background: blue;padding:100px 30px 0px;margin: 20px;"></div>

</div>

给两个子级都设置了浮动后：

<div style="width: 300px;height: 400px;border: 3px solid red;padding: 10px;">

   <div style="width: 200px;height: 100px;background: blue;padding:100px 30px 0px;margin: 25px;float: left;"></div>

   <div style="width: 200px;height: 100px;background: blue;padding:100px 30px 0px;margin: 20px;float: left;"></div>

</div>

二.解决浮动(float)带来的布局问题的方法

1.如果父级中的某个子级设置了浮动(float)，要消除浮动给布局带来的影响，那么给父级也设置浮动

缺点：这样做的话，其他同级的子级元素或同父级同级的元素要保留文档楼的问题，也要跟着设置浮动，但左右margin值会失效

注意：如果父级元素设置了浮动，子级就可以不用做清除浮动的操作

2.给父级设置为内敛块级元素(display:inline-block)

缺点：如果父级中的内容要左右居中显示，不可以设置margin:0px auto:

3.给父级设置一个高度，让父级不受浮动的子元素的影响，显示不了高度和设置的背景

缺点：不利于扩展，也就是说，如果子级元素的高度发生了改变，同样父级元素的高度要同时进行修改

注意：这样做的话也是不需要子级清除浮动来保持原有的布局

4.给父级加overflow:hidden;

缺点：子级的左右margin值会失去效果

5.利用标签清除浮动

用法：在浮动元素的后面加一个空标签，给这个空标签设置一个样式

 <div style="width: 200px;height: 100px;background: blue;padding:100px 30px0px;margin: 25px;float: left;"></div>

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

      空标签可以是div标签，也可以是P标签。够简短，也有很多人用<hr>，只是需要另外为其清除边框，但理论上可以是任何标签。
      这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代 码：clear:both。此方法的弊端在于增加了无意义的结构元素。
       对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是，<br />本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合适。

6.用为元素清除浮动

注意：一定是作用在父级上的

语法： :after{content: "";display: block;clear: both;}

使用after伪对象清除浮动。 该方法只适用于非IE浏览器 。使用中需注意以下几点。

一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；

二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，空(" ")亦是可

以的。

<div id=”layout”>

   <div id=”left”>Left</div>

   <div id=”right”>Right</div>

</div>

css样式如下：

#layout {background: #FF9;}

#layout:after {display: block;clear: both;content: ”";visibility:hidden;height:0;}

#left {float: left;width: 20%;height: 200px;background: #DDD;line-height: 200px;}

#right {float: right;width: 30%;height: 80px;background: #DDD;line-height: 80px;}

7.使用overflow属性。

       此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动

的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6,也可以用width:100%。

       不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上

测试你的页面；

<div id=”layout”>

<div id=”left”>Left</div>

   <div id=”right”>Right</div>

</div>

css样式如下：

#layout {background:#FF9;overflow:auto;zoom:1; }/* overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/

#left {float: left;width: 20%;height: 200px;background: #DDD;line-height: 200px;}

#right {float: right;width: 30%;height: 80px;background: #DDD;line-height: 80px;}