CSS float浅析

写在开篇：

浮动属性的设计初衷，只是为了实现文本环绕效果！

时刻牢记这一点，才能正确使用浮动。

由于浮动元素脱离文档流，它后面的块级元素会忽略它的存在，占据它原本的位置，但是这个块级元素中的内联元素，在流入页面时会考虑浮动元素的边界，它们会围绕着浮动元素。

浮动元素的特征：

1.浮动元素脱离文档流。

2.浮动元素周围的外边距不会合并。

3.浮动元素具有包裹性。

4.浮动元素具有破坏性。

下面这段代码，能够验证上述的四个特征：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>浮动</title>

         <style>

             * {

                 margin: 0;

             }

             .main {

                 width:750px;

                 margin:30px auto;

                 position: relative;

             }

             .wraper {

                 width:410px;

                 background-color: #ccc;

                 margin-bottom: 30px;

             }

             .container {

                 background-color: green;

                 width: 350px;

                 margin-left: 30px;

             }

             .contain {

                 background-color: green;

                 margin-left: 30px;

             }/*有宽度的容器不会自动收缩，不能体现包裹性，这里去掉容器的宽度*/

             .float {

                 float:left;

             }

             .clearfix:after {

                  content: "";

                  display: table;

                  clear: both;

              }

             .clearfix {

                  *zoom: 1;

              }

             .box1 {

                 height: 50px;

                 width: 100px;

                 background-color: red;

                 margin: 20px;

             }

             .box2 {

                 height: 100px;

                 width: 200px;

                 background-color: blue;

                 margin: 20px;

             }

             .list {

                 background-color: orange;

                 line-height: 1.5;

                 width: 300px;

                 position: absolute;

                 top: 0;

                 right: 0;

             }

             li {

                 margin-bottom: 80px;

             }

         </style>

     </head>

     <body>

         <div class="main">

             <div class="wraper">

                 <div class="container">

                     <div class="box1">box1</div>

                     <div class="box2">box2</div>

                 </div><!--结束container-->

             </div><!--结束wraper-->

             <div class="wraper clearfix">

                 <div class="contain float">

                     <div class="box1">box1</div>

                     <div class="box2">box2</div>

                 </div><!--结束container-->

             </div><!--结束wraper-->

             <div class="wraper">

                 <div class="container">

                     <div class="box1 float">box1</div>

                     <div class="box2">box2</div>

                 </div><!--结束container-->

             </div><!--结束wraper-->

             <div class="wraper clearfix">

                 <div class="container">

                     <div class="box1">box1</div>

                     <div class="box2 float">box2</div>

                 </div><!--结束container-->

             </div><!--结束wraper-->

             <div class="list">

                 <ol>

                     <li>第一幅图中，box1与box2在一个绿色的容器中垂直摆放，box1的margin-bottom与box2的margin-top合并，所以它们的margin为20px。</li>

                     <li>第二幅图中，将绿色容器浮动，浮动之后容器紧紧包裹着里面的元素，是为包裹性。（要体现包裹性，一定不要设置浮动元素的宽度，否则不会自动收缩）

                     </li>

                     <li>第三幅图中，将box1浮动，box1脱离文档流，box2向上占据box1的位置，它们的上外边距没有合并。<br />

                         字符“box2”如此显示是box1的margin-top和margin-right的原因。

                     </li>

                     <li>第四幅图中，将box2浮动，容器的高度塌陷；box2的上外边距与box1的下外边距没有合并。

                     </li>

                 </ol>

             </div><!--结束list-->

         </div><!--结束main-->

     </body>

 </html>

深入理解float的破坏性：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>深入理解float的破坏性</title>

         <style>

             body {

                 font-size: 16px;

                 line-height: 1.5;

             }

             .container {

                 width:50%;

                 margin-left: auto;

                 margin-right: auto;

             }

             .box1,.box2 {

                 background-color: cyan;

                 margin-bottom: 50px;

             }

             .box1 img,.box2 img {

                 margin:5px;

                 padding:5px;

                 border:1px solid red;

             }

             .box2 img,.box4 img {

                 float:left;

             }

             .box3 {

                 margin-top: 100px;

                 margin-bottom: 50px;

             }

             .box3,.box4 {

                 border:2px solid cyan;

             }

         </style>

     </head>

     <body>

         <div class="container">

             <div class="box1">

                 <p>这个盒子中的图像没有浮动。我们先来研究一下，图像在没有浮动的情况下，为什么会这样显示？</p>

                 <p>首先，每一个行内元素都会形成一个行内框，没有被任何标签包含的文本被称为“匿名行内元素”，（文本）行内框的高度为line-height的高度；

                     <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:140px;height:80px" />

                     图像的行内框的高度就是它自身盒子的高度（height+padding+border+margin）。

                 </p>

                 <p>然后，每一行都会形成一个行框，行框必须包含这一行中最高行内框的顶端和最低行内框的底端；于是，这个盒子中的文本和图像就是这样显示了。</p>

                 <p>当所有的行框组合在一起，就形成了整个段落的包含框（containing box，包含盒子）。

             </div><!--关闭box1-->

             <div class="box2">

                 <p>这是第二个盒子，图像浮动了。</p>

                 <p>如果浮动只是改变了图像的位置，那么图像应该依旧与自己所在的那一行文字在同一行上，然而它并没有。

                    与它在同一行的文本重新形成了行框，这个行框的形成完全忽略了图像的行内框。也就是说，因为浮动的破坏性，图像的行内框没有了。

                 </p>

                 <p>所有的行框组成这个段落的包含框，可以明显看到，这个段落的包含框没有把浮动图像包含在内。</p>

                 <p>总结：浮动的破坏性实际上破坏了浮动元素的高度，浮动元素的高度为0。

                 <p><img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:140px;height:80px" /></p>

                 但是浮动元素是有宽度的，正是因为它有宽度，所以才会有文本环绕效果。</p>

             </div><!--关闭box2-->

             <div class="box3">

                 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:140px;height:80px" /> 图像没有浮动

             </div><!--关闭box3-->

             <div class="box4">

                 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:140px;height:80px" /> 图像浮动，父元素高度塌陷

             </div><!--关闭box4-->

         </div><!--关闭container-->

     </body>

 </html>

小tips：

父元素overflow: auto; 可解决浮动元素高度塌陷问题。

将元素浮动前，要设置body元素的margin和padding，以避免各浏览器的页面差异。

5.浮动元素块状化。不管元素本身是什么（inline/inline-block/block），只要浮动，自带display:inline-block声明。

浮动的规则：

首先，必须了解浮动元素包含块的概念。

浮动元素的包含块，是其最近的块级祖先元素。

规则1：左浮动的元素，左外边界不能超出其包含块的左内边界。（浮动元素不能超出其包含块的内容区）

规则2：左浮动的元素，左外边界必须是源文档中之前出现的左浮动元素的右外边界；除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面，那么这个后出现的左浮动元素会一直浮动到其包含块的左内边界。

规则3：左浮动元素的右外边界不会与右浮动元素的左外边界交叉。

（如果两个浮动元素加起来的宽度大于包含块的宽度，那么后一个浮动元素将会向下浮动，直到其顶端在前一个浮动元素的底端之下。）

规则4：一个浮动元素的顶端不能超出其包含块的上内边界。（浮动元素不能超出其包含块的内容区）

规则5：浮动元素的顶端不能比它之前所有浮动元素或者块级元素的顶端更高。

规则6：如果一个段落中有一个浮动图像，这个图像的顶端最高只能到该图像所在行框的顶端。

规则7：如果有多个元素连续浮动，浮动元素不能超出包含块的内容区，除非某一浮动元素本身宽度就比包含块的内容区大。

规则8：在满足以上规则的条件下，浮动元素要浮动得尽可能高、尽可能远。

关于浮动元素负外边距：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>浮动元素的margin值</title>

         <style>

             * {

                 margin: 0;

             }

             body {

                 font-size: 16px;

                 line-height: 1.5;

             }

             .box1,.box2 {

                 width: 500px;

                 margin: 20px auto 50px auto;

                 background-color: cyan;

                 border: 1px solid black;

             }

             img {

                 border: 1px solid red;

                 float: left;

             }

             .box1 img {

                 margin: -70px 20px 20px -50px;

             }

             .box2 img {

                 margin-right: -30px;

             }

             p {

                 margin: 10px;

             }

             span {

                 background-color: red;

                 border: 1px solid black;

             }

             .blockElement {

                 border: 1px solid yellow;

                 background-color: green;

                 margin: 10px;

             }

         </style>

     </head>

     <body>

         <div class="box1">

             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:140px;height:210px" />

             <p>浮动元素可以设置负外边距。</p>

             <p>如果左浮动图像将左外边和上外边距距设为负值，则图像向左和向上移动相应的距离。</p>

             <p>此浮动图像的margin-left为-50px，margin-top为-70px；图像向左移动了50px的距离,向上移动了70px的距离</p>

             <p>如果浮动图像margin负值过大，相应地一部分图像将会移动到视窗之外（不可见）。</p>

             <p>浮动图像可以设置margin值，来控制与周围文本的距离。</p>

             <p>此浮动图像的margin-right为20px，margin-bottom为20px。</p>

         </div>

         <div class="box2">

             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:140px;height:210px" />

             <p>如果左浮动图像将右外边距设为负值，那么浮动图像位置不动，其右边的文本向左移动相应的距离。</p>

             <span>如果右边的文本是行内元素，则其边框、背景和文字都将在图像之上显示；</span>

             <div class="blockElement">如果右边的文本是块级元素，则只有文本会在图像之上显示，边框和背景在图像之下显示。</div>

         </div>

     </body>

 </html>

对于定宽的左浮动元素，margin-left为负，元素向左移动；margin-right为负，浮动元素原地不动，其后的行内元素向左移动；两个都为负，两种效果结合。

对于不定宽的左浮动元素，margin-left为负，元素的宽度向左扩展；margin-right为负，元素的宽度向右扩展；两个都为负，向两边扩展。

初步结论：只要显式地设置了width属性，都是定宽；只有没有显式地设置width属性，才有可能是不定宽。

通过浮动元素负外边距实现不改变DOM结构的流体布局：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>不改变DOM结构的流体布局</title>

         <style>

             .container {

                 width:700px;

                 margin: 50px auto;

                 background-color: orange;

                 font-size: 16px;

                 line-height: 1.5;

             }

             .box1 {

                 width:100%;

                 float:left;

             }

             img {

                 float: left;

                 margin-left: -200px;

             }

             .box2 {

                 margin-right: 230px;

             }

             .clearfix:after {

                 content: "";

                 display: table;

                 clear: both;

             }

             .clearfix {

                 *zoom: 1;

             }

             h3,p {

                 padding-left: 10px;

             }

         </style>

     </head>

     <body>

         <div class="container clearfix">

             <div class="box1">

                 <div class="box2">

                 <h3>不改变DOM位置的流体布局</h3>

                 <p>假如有一段文本和一幅图像，在DOM节点中，文本在前，图像在后，怎么能把图像定位到右边呢？</p>

                 <p>通常的做法是，调换DOM节点中图像与文本的位置，让图像在前，文本在后，然后将图像浮动到右边即可。</p>

                 <p>但这样改变DOM节点顺序始终不妥，还有什么更好的方法呢？</p>

                 <p>下面就介绍一种新的思路来完成布局。</p>

                 <ul>

                     <li>将文本用div包起来，定义为box1；现在的结构是一个box1和一个img。</li>

                     <li>将box1宽度设为100%，左浮动；将img设置一个宽度，也左浮动，然后margin-left设为负的宽度值；此时图像就定位到文本的右边啦。

                     （或者，将box1的宽度设为100%，左浮动，并且margin-right为负的图像宽度；图像也会定位到文本右边。）</li>

                     <li>但是有一个问题，图像盖住了文本内容，这可怎么办？</li>

                     <li>重点来了，在box1中增加一个box2，box2把文本全部包起来，然后margin-right设为图像的宽度（+额外的间距），这样就解决问题啦！</li>

                 </ul>

                 </div><!--关闭box2-->

             </div><!--关闭box1-->

             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:200px;height:300px" />

         </div><!--关闭container-->

     </body>

 </html>

想一下我们是如何将图像从文本的下面定位到文本的右边的？

第一种方法，文本宽度100%，左浮动，图像自身宽度，也左浮动；可以这样想，如果视窗的宽度足够，两个相邻的浮动元素本应该是紧挨着的，后浮动的图像开启了margin负值位移技能，向左边移动，当它向左移动的距离等于或者大于自身宽度，它整个图像都将会覆盖在文本之上。

第二种方法，文本宽度100%，左浮动，margin-right为负值；可以这样理解，普通流中，文本占据一整行的宽度，但是可以通过margin调整它在普通流中所占的空间，当margin为正，所占的空间向外边扩展，当margin为负，所占的空间向里面收缩；当margin-right为负的图像宽度时，文本右侧收缩出来的宽度刚好够图形容身。

CSS float浅析的更多相关文章

对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
[CSS]float&clear浮动
CSS float 属性浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 可取的值 ...
[转] CSS float 浮动属性
http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...
css float父元素高度塌陷
css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题以下几个方法可以解决float ...
css float left right 中间空间城数据无法显示
css float left right 中间空间城数据无法显示是由于设定了width具体值太小造成,简单用%值或不设置.
解决子级用css float浮动而父级div没高度不能自适应高度
解决子级对象使用css float浮动而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度当在对象内的盒子 ...
CSS| 解决子级用css float浮动而父级div没高度不能自适应高度
解决子级用css float浮动而父级div没高度不能自适应高度解决子级对象使用css float浮动而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...
子级用css float浮动而父级div没高度不能自适应高度
子级对象使用css float浮动而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...
CSS Float（浮动）
CSS Float(浮动) 一.CSS Float(浮动) CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常 ...

随机推荐

课堂讨论——Alpha版总结会议
我们在课堂上针对第一阶段冲刺过程中存在的问题,展开了激烈的讨论,并投票选出需要改进的最主要三个问题.
mac下mongoDB的使用
第一步: 我们在网上找到mongoDB的安装文件包,下载下来然后放在mac系统的指定位置,如图所示: 第二步:打开数据库服务端我们在bin目录下执行mongod这个命令: 首先cd到bin目录然后 ...
Linux下搭建testlink1.9.17
如果只是要搭建testlink服务的话,建议使用testlink的集成安装包,能避免很多坑下载地址:https://bitnami.com/stack/testlink/installer 下载好后 ...
PSP（4.6——4.12）以及周记录
1.PSP 4.6 8:30 10:30 20 100 博客 B Y min 12:00 13:00 5 55 Account A Y min 13:05 13:15 0 10 站立会议 A Y mi ...
remote desktop software
remote desktop software remote desktop https://www.microsoft.com/zh-cn/p/microsoft-remote-desktop/9w ...
【loj114】k大异或和线性基+特判
题目描述给由 $n$ 个数组成的一个可重集 $S$ ,每次给定一个数 $k$ ,求一个集合 $T⊆S$ ,使得集合 $T$ 在 $S$ 的所有非空子集的不同的异或和中,其异或和 $T_1 ...
linux 命令大全，我去
系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...
10缓冲流、转换流、序列化流、Files
十.流 10.1 缓冲流 10.1.1 概述缓冲流是对4个基本的FileXxx流的增强,所以也是4个流,按照数据类型进行分类 ...
C/C++ Bug记录
链接错误解决方法 1. 检查库是否链接正确 2. 库的顺序是否合理(如果库之间有依赖关系的话) 3. 检查obj文件是否存在既有C编译的,也有C++编译的,如果存在,用extern "C&q ...
再谈Scala集合
集合!集合!一个现代语言平台上的程序员每天代码里用的最多的大概就是该语言上的集合类了,Scala的集合丰富而强大,至今无出其右者,所以这次再回过头再梳理一下. 本文原文出处: 还是先上张图吧,这是我 ...

CSS float浅析

CSS float浅析的更多相关文章

随机推荐

热门专题