float的深入学习

最新推荐文章于 2024-08-12 22:06:26 发布

naixinz

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量249

点赞数 1

分类专栏： css 文章标签： css float

本文链接：https://blog.csdn.net/naixinz/article/details/51246252

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动的深入学习</title>
<style>
    #outer1{margin:0 auto; border:10px solid #000000; background:#FFFF99}
    #inner1{width:200px;height:200px;background:#CCFF99;}
    #outer2{margin:0 auto; border:10px solid #000000; background:#FFFF99}
    #inner2{float:left;width:200px;height:200px;background:#CCFF99;}
    #clear{clear:both;}
    #outer3{margin:0 auto; border:10px solid #000000; background:#FFFF99; overflow:hidden;zoom:1;}
    #outer4{margin:0 auto; border:10px solid #000000; background:#FFFF99; height:300px;}
    .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
    .clearfloat{zoom:1}

</style>
</head>
<body>
<div>
    <p>没有浮动的时候...</p>
</div>
<div id="outer1">
    <div id="inner1"></div>
</div>
<div>
    <p>加上float：left之后...</p>
</div>
<div id="outer2">
    <div id="inner2"></div>
</div>
<div>
    <p>方法一：在浮动的元素后加上有clear:both属性的空div，或者给邻接元素加此属性...</p>
</div>
<div id="outer2">
    <div id="inner2"></div>
    <div id="clear"></div>
</div>
<div>
    <!--room是为了兼容ie6,7而存在的，触发haslayout-->
    <!--overflow定义时不能再定义容器的高度，因为定义之后浏览器会自动获取浮动内容的高度-->
    <!--也不能和position一起使用，隐藏溢出问题-->
    <p>方法二：给浮动元素的容器添加overflow:hidden;zoom:1...</p>
</div>
<div id="outer3">
    <div id="inner2"></div>
</div>
<div>
    <p>方法三：如果是固定高度的布局，可以把容器的高度设置为一固定值...</p>
</div>
<div id="outer4">
    <div id="inner2"></div>
</div>
<div>
    <!--当然，一个div可以属于多个class，如果原本的布局是class而不是id的话也是可以的-->
    <p>方法四：添加伪类：after属性和zoom:1;(同样是起兼容作用)...</p>
</div>
<div id="outer2" class="clearfloat">
    <div id="inner2"></div>
</div>
</body>
</html>

以上。

1.float的意义和用法
float，浮动，一般有none,left,right三种，分别是不浮动，向左浮动和向右浮动；float主要使元素脱离正常的文档流并使其移动到其父元素的最左或者最右，可以实现文字图片环绕，导航等好多布局。

2.float带来的问题和原因探究

关于float破坏性的原理，在一个博客（在文末给出）上看到这样的解释，float最原始的意义就只是文字环绕图片，那么为什么能够实现文字环绕呢？因为浮动破坏了正常的line boxes。
line boxes由许多inline boxes组成，不使用float的图片混排的话，图片的基线会和文字对齐，即图片下边界和文字是在一条线上的，这样子的话图片和文字分别是一些inline boxes；而使用float之所以可以实现环绕，主要是因为float属性破坏了原有的line boxes，这样就能一个图片对应多行文字，这时的图片不仅不受inline boxes的控制，而且已经脱离了正常的文档流，变成一个与其他元素脱离出来，跟随自身属性显示的元素。
这样就出现了我们常常遇到的浮动问题，float影响了其邻近标签和父类标签的布局和属性获取，比如父类没办法根据浮动的子类大小而拉伸，还有浮动的标签的宽度等属性没有办法被获取等。

3.清除float
见以上的代码，主要测试了四个方法，除此之外还有些别的方法，但是每个方法都有其固有的局限性。
1）在浮动的元素后加上具有clear:both属性的空div，或者给邻近的元素加上这一属性
注：这种方法实现比较简单，但是当页面比较复杂，浮动布局比较多的情况下，就要增加很多空的div，会带来资源的浪费，而且一不小心在空div处加个空格什么的又会出现难发现的空白。
2）给浮动元素添加overflow
注：这个在ie6,7是不兼容的，解决兼容性要加上zoom:1这一属性；overflow:hidden是将溢出的部分隐藏，这时，浏览器就会自动获取浮动的内容的高度，那么这时就不能再定义容器的高度了，而且不能和position这一属性一起使用，有可能会出现隐藏溢出的问题；还可以用overflow:auto，这个在超出大小时不会隐藏，但是会出现滚动条，就看个人需求了。
3）把容器高度设置成固定值
注：如果只是一个区块，而且这个区块的高度是固定的话，那就不会带来什么问题，虽然说并没有解决浮动的本质问题。
4）添加伪类：after（推荐）
注：具体的内容见以上的代码，这里同第二种方法，要加上zoom的设置，这个方法通用性比较强，我们可以定义一个after公共类，页面有很多float的情况下，可以在它们的父级标签上添加此类，而且class也可以一次等于多个，所以就算本身就有class这个属性也没有关系的。
其他：把父类标签也改为float，这个总觉得不太科学，整个页面都这么一层一层浮动的话，会出现更多的问题。

4.总结
既然float会破坏布局，而且带来很多问题，那么除了文字环绕图片这个基本的必须用float实现的布局之外，其他的布局我们能不用float就不要用了，尽可能的让每种布局都用它最原始的方法来实现就很好啊。

5.更深入的学习
http://www.zhangxinxu.com/wordpress/?p=583
http://www.zhangxinxu.com/wordpress/?p=594