float元素对父元素高度的影响，img、a及浏览器之间兼容性问题

最新推荐文章于 2024-03-01 17:29:29 发布

Xaire

最新推荐文章于 2024-03-01 17:29:29 发布

阅读量502

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/u012183426/article/details/100012169

版权

本文介绍了浮动元素如何影响父元素高度，以及如何通过overflow:hidden来解决高度自适应问题。此外，还讲解了如何处理图片的显示方式，包括将img元素设置为block和其外包裹的a标签同样设置为block，以实现自定义宽高的效果。文章还探讨了针对不同浏览器的CSS hack应用，如针对IE6的背景颜色设置。

摘要由CSDN通过智能技术生成

问题一：子元素float后导致父元素高度不能自适应计算

解决办法：.

浮动会让子元素脱离文档流，当所有元素都脱离时，此时父元素没有设置高度，导致父元素高度为0
给父元素添加overflow:hidden;会清除所有子元素的浮动，然后进行自适应高度计算，因为父元素没有设定高度，所以不会裁剪

问题二： img是内联元素，但是其本身有宽高，为了能自己设置其宽高:
1.有img就把其设置为display：block,
2.若是img外面还有包裹一个a标签，就把a标签也设置为display:block

问题三：hack的应用
               针对IE6而言：第一行，linearxxx不支持，显示不出来
                  第二行，认识*，所以background设定为#999
                  第二行覆盖第一行
               *对于chrome而言，第一行，支持
               第二行，不认识*
                  第一行，生效
Demo:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           /* 1.不同浏览器的margin和padding不一致 */
           /* 2.建议少用*,会增加网页加载性能，他会轮询所有的元素，效率低下*/
           /* *{
               margin: 0;
               padding: 0;
           } */
           body,div,p,ul,li,dl,dt,dd,h1,a{
               margin: 0;
               padding: 0;
           }
           body{
               font-family: 微软雅黑, "verdana, geneva, arial, helvetica, sans-serif";
           }
           html,body{
               background-color: #2e2e2e;
           }
           #header, #banner, #content, #footer{
               width: 1176px;
               margin: 0 auto;
               height: ;
               background-color: #900;
           }
           #header{
               overflow: hidden;
               /*问题：1.浮动会让子元素脱离文档流，当所有元素都脱离时，此时父元素没有设置高度，导致父元素高度为0
               *2.overflow:hidden;会清除所有子元素的浮动，然后进行自适应高度计算，因为父元素没有设定高度，所以不会裁剪
               **/
           }
           /* #header{
               *width: 1500px;
               *background: #EEEEEE;
               *现在的header容器高度为0;float元素会脱离文档流，
               *导致后面没有脱离文档流的元素向前补位
           } */
           body{
               padding-top: 45px;
           }
           img{
               /* img是内联元素，但是其本身有宽高，为了能自己设置其宽高:
               *1.有img就把其设置为display：block,
               *2.若是img外面还有包裹一个a标签，就把a标签也设置为display:block
               */
               border: none;/* 低版本IE会有边框 */
           }
           #logo {
               width: 222px;
               height: 84px;
               float: left;
               background-color: #111;
           }
           #logo a{
               display: block;
               width: 222px;
               height: 84px;
           }
           #log a img{