css整理

爱被打了一巴掌 2022-07-16 07:09 184阅读 0赞

1.  **介绍常见的css  hack**

css hack名词解释：

针对不同的浏览器对css解析认识不同，所以我们要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中得到我们想要的界面效果，简单的说，CSS hack的目的是使你的css代码兼容不同的浏览器。

*  属性前缀法(即类内部Hack)：例如 IE6能识别下划线"\_"和星号" \* "，IE7能识别星号" \* "，但不能识别下划线"\_"，IE6~IE10都认识"\\9"，但firefox前述三个都不能认识。
 *  选择器前缀法(即选择器Hack)：例如 IE6能识别\*html .class\{\}，IE7能识别\*+html .class\{\}或者\*:first-child+html .class\{\}。
 *  IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

使用方法：

*  a、HTML头部引用

发现该段代码只会在IE 7下才会显示，其他的(IE 8 9 10 或者其他浏览器)都不会显示

只在IE下生效

b、类内属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展示效果

*  “-″减号是IE6专有的hack
 *  “\\9″ IE6/IE7/IE8/IE9/IE10都生效
 *  “\\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
 *  “\\9\\0″ 只对IE9/IE10生效，是IE9/10的hack

#tip{ 
    background:blue;/*Firefox背景变蓝色 所有浏览器都支持*/ 
    background:red !important;/*Firefox背景变红色 所有浏览器除IE6其他的都支持*/ 
    background:red\9;/*IE8背景变红色 IE6、7、8、9支持覆盖上面样式*/ 
    *background:black;/*IE7背景变黑色 IE6、7支持又一次覆盖上面样式*/ 
    _background:orange;/*IE6背景变橘色 紧IE6支持又一次覆盖上面样式*/ 
    }

:root element{color：#666\9;}//IE9

IE系列浏览器可读「\\9」，而IE6和IE7可读「\*」(米字号)，另外IE6可辨识「\_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、GoogleChrome、Safari等)。

IE7和IE6可读「\*」(米字号)，IE6又可以读「\_」(底线)，但是IE7却无法读取「\_」，至于Firefox(非IE浏览器)则完全无法辨识「\*」和「\_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox

IE7可以辨识「\*」和「!important」，但是IE6只可以辨识「\*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「\*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox

因为Firefox可以辨识「!important」但却无法辨识「\*」，而IE7则可以同时看懂「\*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。

IE7和IE6都可以辨识「\*」(米字号)，但IE6可以辨识「\_」(底线)，IE7却无法辨识，透过IE7无法读取「\_」的特性就能轻鬆区隔IE6和IE7之间的差异。

因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色

因为IE6可以辨识「\_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSShack

:root”伪类IE系列只有IE9支持，其他主流浏览器均支持，利用这一点来区分IE8和IE9。另外考虑到opera部分支持，完全支持:root,所以不使用。

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

目前最常见的是

*html *前缀只对IE6生效
    *+html *+前缀只对IE7生效
    @media screen\9{...}只对IE6/7生效
    @media \0screen {body { background: red; }}只对IE8有效
    @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
    @media screen\0 {body { background: green; }} 只对IE8/9/10有效
    @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
    等等

结合CSS3的一些选择器，如html:first-child，body:nth-of-type(1)，衍生出更多的hack方式

总结：使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。

**2、css层叠**

层叠指的是上级标签的样式会自动继承到其所有下级标签，如针对<body>设置的标签选择器所设的字体样式会自动应用到<body>下的<p>中，除非<p>重写了相关样式将其覆盖。

文档中的一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠  
CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名，如对于页面上方的<div>，可将其id设为header；页面下方的<div>设为footer，可以增强CSS的可维护性

基本上层叠的意思就是“继承”、“权重”、“覆盖”，通过良好的层级命名更好的实现效果，更少的代码，更多的功能。

**3、CSS浏览器兼容**

1)不同浏览器的默认标签的外边距和内边距不同(IE6、IE7的body标签，默认的样式应该是：display:block;margin:15px 10px;zoom:1;（不是很确定），而没有预设padding值，chrome/firefox也只是设置了margin:8px;没有预设padding，从此可见，设置margin:0;即可消除边距了，)

解决办法：\*\{margin:0;padding:0;\}不建议通配符

建议：可以写全body,p,html,h1,h2,h3...\{margin:0;padding:0;\}

2)css3新出的特性：

css3边框：

*  border-radius:圆角边框
 *  box-shadow:边框阴影  
    
 *  box-image:边框图片

css3背景：

*  background-size：图片大小
 *  background-origin：图片定位区域

css3文本效果：

*  text-shadow：文本阴影
 *  word-wrap：自动换行

css3字体：

*  @font-face：定义字体

css32D转换：

*  translate()：当前位置移动
 *  rotate()：顺时针旋转角度
 *  scale()：元素尺寸放大缩小
 *  skew()：元素翻转
 *  matrix()：2D转换的组合

css33D转换：

*  rotateX()：围绕其 X 轴旋转
 *  rotateY():围绕其 Y 轴旋转

css3过渡：

*  transition：hover过渡

css3动画：

animation：动画设置
       @keyframes：创建动画规则

css3多列：

*  column-count：分隔的列数
 *  column-gap：列之间的间隔
 *  column-rule：列之间的宽度、样式和颜色

css3用户界面：

*  resize：是否可由用户调整元素尺寸
 *  box-sizing：可以改变盒子模型
 *  outline-offset：超出边框边缘的位置绘制轮廓

**4、box-sizing:**

对于盒模型的解释有两种，一种是IE的解释，在 IE5.x 以及 Quirks 模式的 IE6/7 中，将 border 与 padding 都包含在 width 之内，而另一种是遵从W3C的标准，

这种情况在 CSS3 时代有了改善，得益于这个叫做 box-sizing 的属性，它具有“content-box”和“border-box”两个值。

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

ie8+浏览器支持content-box和border-box；

ff则支持全部三个值。

使用时：

\-webkit-box-sizing: 100px; // for ios-safari, android

\-moz-box-sizing:100px; //for ff

box-sizing:100px; //for other

在css3中加入了box-sizing这个属性，当我们设置box-sizinng为border-box时候，border和padding就被包含在宽高内，和之前的IE的标准

一样，但是这里有两种特殊情况：

*  无宽度-绝对定位（position:absolute）元素
 *  无宽度-浮动（float）元素

他们在页面上的表现均不占空间（脱离普通流，感觉像是浮在页面上层一样，移动它们不影响其他元素定位）

position:

<table> 
 <tbody> 
  <tr> 
   <td><span style="font-size:14px; color:#cc33cc">position值</span></td> 
   <td><span style="font-size:14px">如何定位</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">static</span></td> 
   <td><span style="font-size:14px">position的默认值。元素将定位到它本身的正常位置，即块状元素是从上到下，而行内元素是普通的从左到右，其实就是没有定位，元素在页面上占据位置，不能使用top right bottom left移动元素位置</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">relative</span></td> 
   <td><span style="font-size:14px">相对定位，相对于元素的正常位置来进行定位，元素在页面占据位置。可以使用top right bottom left移动元素位置</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">absolute</span></td> 
   <td><span style="font-size:14px">绝对定位，相对于最近的一级的定位不是static的父元素来进行定位，元素在页面不占位置top right bottom left移动元素位置</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">fixed</span></td> 
   <td><span style="font-size:14px">绝对定位，相对于浏览器窗口来进行定位，其余和absolute一样，相当于一种特殊的absolute</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">inherit</span></td> 
   <td><span style="font-size:14px">从父元素继承position1属性的值</span></td> 
  </tr> 
 </tbody> 
</table>

每个网页都可以看成是由一层一层页面堆叠起来的，从某个博客上盗了一张图

![网页的不同阶层][Center]

position设置为relative时候，元素依然在普通流中，位置是正常的位置，你可以通过left right等移动元素，会影响其他元素的位置

而当一个元素的position的值为absolute或者fixed的时候，会发生三件事情：

1.  把该元素往Z轴方向移了一层，元素脱离了普通流，所以不再占据原来的那层空间，还会覆盖下层的元素
2.  该元素将变为块级元素，相当于给该元素设置了display:block（给一个内联元素，<span><a>input>等设置了absolute之后发现可以设置宽高了）
3.  如果该元素是块级元素，元素的宽度由原来的width:100%（占据一行），变为了auto

由此可以发现，当position设置为absolute或者fixed，如果你不想覆盖下层元素，可以设置z-index值达到效果，比如我们常说的遮罩层大概就是这个原理

float:

元素浮动，取值有四个：left right none inherit，没有top  bottom可以看出来只能左右浮动，不能上下浮动，

说说其要点

1.  元素设置了float后，它也会脱离普通流（像position:absolute一样），不再占据原来那层空间，还会覆盖下一层的元素
2.  浮动不会对该元素的上一个兄弟元素有任何影响
3.  浮动之后，该元素的下一个兄弟元素会紧贴到该元素之前没有设置float的元素之后（因为该元素已经脱离了普通流，或者说不在这一层了，所以它的下一个元素当让要补上它的位置）
4.  如果该元素的下一个兄弟有内联元素（通常是文字）则会围绕该元素显示，形成类似文字围绕图片的效果（原因：带有浮动属性的元素会脱离标准流进行排列布局，脱离标准流后的元素就不和快元素相处在同一个流不居中，使得带有浮动属性的元素漂浮在正常块元素上面，但是浮动的块虽然 脱离了正常的文档流，但是依然占据正常文档流的文本空间于是在其后面写的文本并不会被浮动元素所覆盖而是继续水平排列超出换行）
5.  下一个兄弟元素如果也设置了同一方向的float，则会紧随该元素之后显示
6.  该元素将变为块级元素，相当于该元素设置了display：block(和position：absolute一样)

——————————————————————————————————————————————————————————————

下面有部分是拷贝了别的博客来的，让我们一起来学习大神们出的题吧

最近寒冬大哥针对面试发了一点“闹骚”，我们来看看他的微博是怎么说的呢？

面试的时候问个css的position属性能刷掉一半的人这是啥情况……其实这问题我本来打算的是可以顺着一路扯到
    normal flow、containing block、bfc、margin collapse，base line，writing mode，bidi，
    这样一路问下去的，奈何第一个问题（亲我真的只问了position有哪些取值和行为啊）就悲剧了……

*  position属性常用的取值static、relative以及absolute和它们的基本行为是每个前端都应该掌握的。这包括relative和absolute的定位原点。
 *  fixed旧版本IE不支持，但是一个对技术有热情的工程师也是应该了解的。
 *  有过研究工程师可以知道absolute的containing block计算方式跟正常流不同，当然如果没读过标准的话，表述方式不一定是这样。
 *  对CSS布局有深入研究的工程师会知道position跟display、margin collapse、overflow、float这些特性相互叠加后的行为。

说句老实话，在状态好的情况下，若是被问到这个题，我还能和他说道说道（很浅的那种），在状态一般的情况下，我估计自己也直接悲剧了，那造成这个的是什么原因呢？

答案毫无疑问的是我CSS水平是很水的，当项目经验不够的情况下，看书是不能记住一些东西的，所以还是需要项目实践。

**思考过程**

这个题若是单纯提出position的几个属性，倒没什么问题，但我们来看看他的发散：

normal flow（一般流）

containing block（包含块）

bfc（我深刻的意识到我一定见过他，但可耻的忘的一干二净了！）

margin collapse（搞不懂啊，应该是float引起的元素坍塌吧？）

base line （基线对齐）

......

后面的就完全没有印象了，完了我想说，大哥我们能说中文吗。。。至少给点解释吧，对于css菜鸟来说看题目都很吃力的。。。。（掩面而泣）

**惊叹**

仔细阅读题目并加以分析后，你会发现他这潭水是很深的，这道题快5分钟可结束，慢可问上半个小时，而且问完了CSS都可以忽略不计了。。。

为什么这么说呢？

① position主要用于页面布局，对css布局熟悉的朋友能很好的运用他布局，甚至抛弃float那个魔鬼（昨天我做了一道面试题就不用float布局，因为float本身是不用于布局的，这么做的大哥，我不知道对不对，但我认为既然float不应该用于布局，我们便应该下意识的少用）。

② 在他发散过程中由将块级元素与行内元素提到了，甚至细分到了行内元素的垂直对齐方式，更有可能发散到line-height上面，不可谓不深啊！

③ 在以上能做好的都已经不错了，然后这道题更是可以细致到各种应用细节，比如在IE7一下浏览器使用relative的z-index会有什么问题，比如在布局上你会使用float吗，float为什么会引起元素坍塌，你如何解决元素坍塌......

......

然后的然后，他这道题真的发散开了就很大了，对于我这种水货来说，看不懂啊，于是便只能在自己理解的方面做下说明，于是我们开始吧！

## 基本框 ##

CSS假定每个元素都有一个基本框，这个矩形框便是我们所说的元素框（在CSS3出现后圆形、团原型也不是不可能哦）

各个元素框中心有一个内容区（content area），这个内容区域会有以下属性：内边距，外边距，边框。我这里又引用下其他大哥的图吧：

![27152706-e5caad11ed7a45b38679c9e3f4bfb64e.jpg][]

![27152643-29b3e45c53984864a16e163f9a20cfbe.jpg][]

## 包含块 ##

因为每个元素都相对于其它包含块摆放，所以包含块就是一个元素的“布局上下文”，即我们所说的containing  block，包含块简单的说就是定位参考框，或者定位坐标参考系，元素一旦定义了定位显示（相对、绝对、固定）都包含块性质，它所包含的定位元素都将以该包含块为坐标系进行定位和调整。

原理：一个元素盒子的位置和大小有时候是通过相对于一个特定的长方形来计算的，这个长方形就被成为元素的containing block，一个元素的containing block按以下方式定义：

1.  浏览器选择根元素作为containing block，我们称之为初始containing block
2.  对于其他元素，除非元素使用的是绝对位置，containing block由最近的块级祖先元素盒子的内容边界组成
3.  如果元素有属性‘position:fixed’，containing block由视图建立
4.  如果元素有属性‘position:absolute’，containing block由最近的position不是static的祖先建立

如果没有祖先，根元素盒子的内容边界确定为containing block

举个例子：

<HTML>
       <HEAD>
          <TITLE>Illustration of containing blocks</TITLE>
       </HEAD>
       <BODY id="body">
          <DIV id="div1">
          <P id="p1">This is text in the first paragraph…</P>
          <P id="p2">This is text <EM id="em1"> in the 
          <STRONG id="strong1">second</STRONG> paragraph.</EM></P>
          </DIV>
       </BODY>
    </HTML>

上文中各个元素的 containing block分别为

body:initial C.B

div1:body

p1:div1

p2:div1

em1:p2

strong1:p2

如果我们设置 div1 的 position：

\#div1 \{ position: absolute; left: 50px; top: 50px \}

div1 的 containing block 就不再是 body，它变成了初始 containing block（因为这里还没有具有 position 的祖先盒子）。

如果我们按如下方式放置 em1：

\#div1 \{ position: absolute; left: 50px; top: 50px \}  
\#em1  \{ position: absolute; left: 100px; top: 100px \}

containing blocks 变成如下：

body:initial C.B

div1:initial C.B

p1:div1

p2:div1

em1:div1

strong1:em1

![Center 1][]

## 块级元素 ##

块级元素很霸道，会独占一行作为自己的王国，一般一个元素的width被定义为从左内边距到右内边距的距离（IE6对盒模型解释有误）。margin、padding、width、height可以确定文档布局。

多数情况下文档高宽我们不太关心，宽度一般会铺满浏览器，高度会自己延生。

**水平格式化**

<p style="width: 200px; padding: 10px; margin: 20px;">
        水平格式化</p>

本来p元素宽度是200，但是由于padding问题宽度就变为220了，外边距再延生40，所以整个宽度就是260了，这样便**隐式**的增加了width的值！  
但是，其右边距却不是20，因为CSS还有一个规则：正常流块级元素的margin，width，padding，border之和必须等于包含块的内容区域，所以右边距会被重置为auto。

所以我们要将一个元素居中会这样设置

在宽度确定的情况下，左外边距与右外边距的值会被设置为相等的值（IE6忽视之，他会将之设置为0）。

但是这种写法在chrom和firefox浏览器起作用，在混杂模式下却不起作用， 百度了下大家的做法，不除外以下几种方法：

1.  将body设置为text-align:center                                                                                                
    
        <!DOCTYPE html>  
        <html>  
        <head>  
          <meta charset="utf-8">  
          <title></title>  
        </head>  
        <body style='text-align:center'>  
        <input type="text" placeholder="input date to save">  
        <button>save</button> 
        <div style='background-color:red;margin:0 auto;width:100px;height:100px;' ></div>
        <script>   
        </script>  
        </body>  
        </html>
    
      
    
2.  或者是在你将设置为居中的元素外面包一层div
    
        <!DOCTYPE html>  
        <html>  
        <head>  
          <meta charset="utf-8">  
          <title></title>  
        </head>  
        <body >  
        <input type="text" placeholder="input date to save">  
        <button>save</button> 
        <div style='text-align:center'>
        <div style='background-color:red;margin:0 auto;width:100px;height:100px;' ></div></div>
        <script>   
        </script>  
        </body>  
        </html>

**负外边距**

由于margin可以被设置为负值，所以整个情况又会变得比较复杂，因为按照我们上面的规则，width便有可能超过其包含块！！！

<div style=" margin: 20px auto; width: 300px; background: gray; padding: 10px;">
        <p style="  background-color: Orange;">
            刀狂剑痴叶小钗</p>
    </div>

<div style=" margin: 20px auto; width: 300px; background: gray; padding: 10px;">
        <p style="  background-color: Orange; margin: 0 -20px;">
            刀狂剑痴叶小钗</p>
    </div>

![19233430-d297ea2bcc794fb4a30c03b6af71e472.png][]

所以，我们平时操作负边距时候，其实是增加了高宽，若是高宽确定的情况下，那边是其他几个属性被增加了，带来了元素移动的错觉。

**垂直居中**

在水平情况下设置auto后，会取相同的值，当在垂直情况下，情况有所不同，margin: auto 0;这种情况下，上下外边距会被重置为0，元素框失去了外边距（定位元素有所不同）。

<div style=" margin: 20px auto; width: 300px; height: 200px; background: gray; padding: 10px; position: relative;">
        <p style="  background-color: Orange; width: 130px; height: 20px; margin: auto; position: absolute; ">
            刀狂剑痴叶小钗</p>
    </div>

![19234756-4c2ae302536f43b4a98aa131c6e87663.png][]

**外边距合并**

外边距合并的问题大家都知道，上下外边距会发生合并现象，但是有种情况会让事情变得比较复杂：

若是我们将代码做一点改变：“将外层元素border”去掉；那么。。

![27161717-679b69139eb4465d82fe3dbe896f19cb.jpg][]

## 行内元素 ##

行内元素和块级元素表现有很多不同

**行内格式化**

所有元素都有一个line-height属性，这个值会显著的影响行内元素显示，行高由其组成元素和其他内容（如文本）高度确定。

注意：line-height实际只影响行内元素和其他行内内容，不会影响到块级元素（至少不直接影响）

**建立框**

首先，对于行内元素来说，font-size确定了内容区的高度，如果一个元素的font-size是15px，那么内容区高度便是15px，因为所有元素的em框都是15px。

如果一个行内元素的font-size为15px，line-height为21px，相差的6px便是行间距，由此行内框形成：

![20002923-253d8e6d42fd40dabfc7cf16063c4e02.png][]

但是有一个场景又会让整个发展变得扑朔迷离：

<div style="line-height: 12px; font-size: 12px; margin: 20px auto;  background: gray;">
        刀狂剑痴叶小钗<span style=" font-size: 24px;">刀狂剑痴叶小钗</span>刀狂剑痴叶小钗
    </div>

![20003739-0992e6db2a44461c87ea0e5833040241.png][]

对于匿名文本来说，内容高度没有变化，半间距为0，但是对于span来说，line-height减去font-size后我们得到的半间距为-6，所以其行内框依旧是12px，内容区却大了出来。

**vertical-align**

margin的方式不能垂直对齐，行内元素便提供了vertical-align属性：

top:将元素行内框的顶端与包含该元素的行框的顶端对齐

bottom:将元素行内框的低端与包含该元素的行框的低端对齐

text-top:将元素行内框的顶端与父元素内容区的顶端对齐

text-bottom:将元素行内框的低端与父元素内容区的低端对齐

middle:将元素行内框的垂直中点与父元素基线上0.5ex处对齐

# 浮动和定位 #

经过以上的知识，我们知道了，所有文档元素都有一个框！被称为元素框，它描述了一个元素在文档布局中所占空间大小，所以框与框之间是会互相影响的。以现在的布局来说，浮动和定位掌握了布局。

## 浮动float ##

float是个奇怪的东东，他最开始的提出是用作让图片浮动，以便文字能围绕着图片书写，仅此而已！

<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title></title>
         <style type="text/css">
             body { background: #ECECEC; }
             .outer { background: white; border: 1px solid #CCCCCC; width: 300px; }
             .inner { margin: 10px; padding: 8px; background: none repeat scroll 0 0 #1C87D5; color: white;}
         </style>
     </head>
     <body>
    <div style="margin: 20px auto; width: 300px; height: 200px; background: gray; padding: 10px; ">
      <img src='Hydrangeas.jpg' style='float:right;width:100px;height:80px;'>春天来了哈哈哈哈哈哈哈河里的冰已经化啦春天来了哈哈哈哈哈哈哈河里的冰已经化啦
      春天来了哈哈哈哈哈哈哈河里的冰已经化啦春天来了哈哈哈哈哈哈哈河里的冰已经化啦
    </div>
     </body>
     </html>

结果如下：

![Center 2][]

是不是感觉float很好用？但是问题来了：

浮动元素会从文档的正常流中删除，也就是说会像position:absolute一样到上一层中，仍然对文档布局有一定影响

## float的内幕 ##

在详细了解他之前，我们看一看包含块（containing block），浮动元素的包含块是最接近的块级祖先元素：

img的包含块就是最近的p标签，然后浮动元素会生成一个块级框（inline元素也会），其实我们可以认为float就是不带方向性的inline-block（事实上这是非常错误的认识）。

浮动元素的摆放有许多规则

① 浮动元素不能超过包含块的边距
    ② 浮动元素的左右外边距必须是源文档中之前出现的左浮动元素的右外边距（这句话我不太理解，我们下来看看）
    ③ 左浮动元素不会出现在右浮动元素的右边
    ④ 浮动元素的顶端不能比其父元素的内顶端还高
    ⑤ 浮动元素的顶端不能比之前所有浮动元素或者块级元素的顶端更高
    ⑥ 源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含块元素所生成框的任何行高还高
    ⑦ .......

后面还有几个规则呢，我这里都不想写了，说实话我看着这么多规则第一映像就不想用这个属性了。。。

float我们都“比较”熟悉，所以对他的表现一般还是抓得准的，因为我们认为其实带方向的inline-block，于是我们来看看浮动的破坏性。

在此之前先解释下概念

**inline boxes**

行内元素会生成一个叫行内框的东西，前面我们已经知道了

在containing boxes中，一个个inline boxes组成了line boxs(行框)，这是浮动影响布局的关键box类型

content area 内容区是一种围绕文字看不见的box，大小就是font-size

现在我们来分析下文字环绕图片的原理

正常的图文混排
    默认情况下，图片与文字混排应该是这个样子：图片与文字基线对齐，图片与文字在同一行上，如下图所示：
    
    上图中，图片为一个inline boxes，两边的文字也是inline boxes。由于line boxes的高度是由其内部最高的inline boxes的高度决定的，所以这里line boxes的高度就是图片的高度。此时图片与文字是同一box类型的元素（都是inline boxes），是在同一行上的，所以，默认状态下，一张图片只能与一行文字对齐。而要想让一张图片要与多行文字对齐，您唯一能做的就是破坏正常的line boxes模型。

含有浮动属性的图片与文字
    先看一下图片添加了float:left样式后的表现，见下图：

正常情况下，图片自身就是个inline boxes,与两侧的文字inline boxes共同组成了line boxes,但是一旦图片加入了浮动，情况就完全变了。可以认为是浮动破坏了img图片的inline boxes特性，至少有一点可以肯定的是，刚才的图片的inline boxes不存在了。一旦图片失去了inline boxes特性就无法与inline boxes的文字排在一行了，其会从line boxes上脱离出来，跟随自身的方位属性，靠边排列。

这个从line boxes上脱离的浮动元素其实就是一个躯体，一个空壳子，表象。因为其没有inline boxes.。这个inline boxes有个很重要的概念。

总结而言：

在目前的CSS中，所有高度都是有两个CSS模型产生的，一个是box模型，对应的CSS为‘height+padding+margin’，另一个是line box模型，对象样式是line-height。前者的height属性分为明显的height值和隐藏的height值，所谓的隐藏的height值是指的图片的高度，一旦载入一张图片其内在的height值就会起作用。而后者针对于文字等这类的inline-boxes的元素（图像也属于inline-boxes，但是其height比line-height作用更凶猛，故其inine boxes的高度就等于其自身的高度，对于inline-height无反应）,inline-boxes的高度直接受line-height控制，改变line-height文字拉开或重叠就是这个原因，而真正的高度表现则是每行众多的inline boxes组成的line boxes组成的lineboxes(等于内部最高的inline boxes)而这些lineboxes的高度垂直堆叠形成了containing box的高度，也就是我们见到的div或p标签之类的高度，所以对于linebox模型的元素而言，没有inlinebox就没有高度了，而浮动恰恰是将元素的inlineboxes破坏了，于是这些 元素就没有高度了

所以，float可以让文字围绕着图片，因为图片没有了高度，但是他是有宽度的哟，元素没有了高度就会造成另一个事实：父级块级元素高度塌陷！我们想想块级元素里面都没有高度了，他塌陷是非常合理的啊！所以我们又会搞很多事情来清除浮动带来的高度塌陷。所以布局的时候尽量的少使用float。。。

PS:一件可耻的事情就是，这种情况下margin: auto;可以实现垂直居中的目的。。

![20095509-aff1d3129fa14677a28a6a2d0b7f071b.png][]

③ BFC（可耻的我最后发现我没有将他。。。）

什么是BFC(Block Formatting Context)，简单讲，它是提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。例如，在同一个BFC内，盒子会一个挨着一个的排，
    相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clear float也只对同一个BFC内的元素有效。

待补充。。。。。

[Center]: /images/20220716/564ecb627b2a4cdeb961e8e820d125ca.png
[27152706-e5caad11ed7a45b38679c9e3f4bfb64e.jpg]: /images/20220716/7bd93846264e41c8a630d631182c8660.png
[27152643-29b3e45c53984864a16e163f9a20cfbe.jpg]: /images/20220716/f3be2cd0c25d4e689713b702ece767d6.png
[Center 1]: /images/20220716/f2dd331460f648da928ac0a969939de1.png
[19233430-d297ea2bcc794fb4a30c03b6af71e472.png]: /images/20220716/2152242f90d24203afcbaa514d0d276d.png
[19234756-4c2ae302536f43b4a98aa131c6e87663.png]: /images/20220716/3305adfe39234b5dbb55babb3cb06747.png
[27161717-679b69139eb4465d82fe3dbe896f19cb.jpg]: /images/20220716/26093a54414a4514b04d4b4696bae077.png
[20002923-253d8e6d42fd40dabfc7cf16063c4e02.png]: /images/20220716/4597fa9bdf14425bb9cc25e1297722ff.png
[20003739-0992e6db2a44461c87ea0e5833040241.png]: /images/20220716/cd0772bc66d141dcbd798f07eec6121f.png
[Center 2]: /images/20220716/9eadb282dd674c37a28aa6c32830f19a.png
[20095509-aff1d3129fa14677a28a6a2d0b7f071b.png]: /images/20220716/c531ac1f56d042f398413268a9f5f238.png