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(浮动),往往是用于图像,但它在布局时一样非常 ...

随机推荐

Final发布文案+美工展示
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2476项目地址:https://coding.net/u/wuyy694/ ...
Linux内核分析第十八章读书笔记
第十八章调试调试工作艰难是内核级开发区别于用户级开发的一个显著特点. 18.1 准备开始我们需要什么? 一个bug 一个藏匿bug的内核版本思路:假定能够让bug重现在用户级程序中,bug直 ...
Linux内核分析笔记三构造一个简单的Linux系统MenuOS ——by王玥
一.知识点总结 (一)Linux源代码简介 arch/x86目录下的代码是我们重点关注的内核启动相关代码都在init目录下 start_kernel函数相当于普通C程序的main函数 linux的核 ...
(Alpha)Let's-NABC
效果图 NABC Need 在日常生活中我们也许经常有这样的疑问:在空闲时间内经常感到无处可去:抑或是有个心血来潮的想法却无人响应:或者困扰于自己狭小的交际圈,希望能有更多的朋友.(打个羽毛球没人一起 ...
评论beta发布
1. 组名:飞天小女警项目名:礼物挑选小工具评价:该系统可以通过选择所要接礼的人的性别.年龄和与送礼者的关系及所要送礼的价值,就可以推荐出所送的礼物.还可以通过男/女所选的Top前10进行简单推荐 ...
2013长春网赛1009 hdu 4767 Bell（矩阵快速幂+中国剩余定理）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4767 题意:求集合{1, 2, 3, ..., n}有多少种划分情况bell[n],最后结果bell[ ...
Python的文件读写
目录读文件操作文件读取内容面试题的例子写文件操作模式指针操作字符编码读文件操作文件打开一个文件用open()方法(open()返回一个文件对象,它是可迭代的): 文件使用完毕后必 ...
InputStream流无法重复读取的解决办法
前言:今天工作的需要需要读取aws云上S3桶里面的PDF数据,第一步能够正常的获取PDF文件的InputStream流,然后,我为了测试使用了IOUtils.toString(is)将流System. ...
C#快速删除bin和obj文件夹的方法
C#程序总会生成bin和obj文件夹,为了减小源码的大小,就有必要将这两个文件夹删除,于是想到用批处理文件来删除. 以下是批处理的代码: @echo offset nowPath=%cd%cd /cd ...
[USACO4.4]追查坏牛奶Pollutant Control
题目链接:ヾ(≧∇≦*)ゝ Solution: 第一问很好解决,根据网络流:最大流=最小割定理,我们可以轻松求出. 至于第二问,我们不妨把每一条边乘上一个大于1000的数再加上1. 这样的话,对于最小 ...

CSS float浅析

CSS float浅析的更多相关文章

随机推荐

热门专题