【总结】我所整理的float, inline-block还有position:absolute

时间 2019-11-20

标签总结整理 float inline block 还有 position absolute 栏目 CSS 繁體版

原文原文链接

这篇主要写了一下几个知识点：css

浮动和inline-block的概念和选择
浮动和position:absolute对于脱离文档流的区别
这篇文章参考了一下几个连接：
https://www.zhihu.com/question/24529373/answer/29135021
http://www.w3cplus.com/css/inline-blocks.html

感谢大家的无私分享以及钻研的精神。

浮动最先是用来实现文字环绕图片用的，而不是像如今不少地方用来砌砖头用。html

inline-block 的元素web

具备block元素能够设置宽高的特性;
具备 inline 元素默认不换行的特性;
能够设置 vertical-align 属性

浮动和inline-block有共同的特色就是包裹性也就是说，它能
1）让元素排成一排
2）让inline的元素支持宽高
3）让块元素在不设置宽高时内容撑开宽高
可是inline-block并不会让元素脱离文档流chrome

inline-block和float的区别
虽然设置浮动跟设置inline-block有些特征相似，但二者的区别仍是很是明显的:windows

文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。所以设置inline-block不须要清除浮动。固然，周围元素不会环绕这个元素，你也不可能经过清除inline-block就让一个元素跑到下面去。
水平位置（Horizontal position）：很明显你不能经过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。可是父元素内元素若是设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这仍是由于浮动元素脱离文档流的关系）。
垂直对齐（Vertical alignment）：inline-block 元素沿着默认的基线对齐。浮动元素紧贴顶部。你能够经过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要缘由。
空白（Whitespace）：inline-block包含html空白节点。若是你的html中一系列元素每一个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴
IE6和IE7：Ie67对此属性部分支持。若是你要兼容这些浏览器，必须解决这个问题。这不是个大问题，但值得留意一下。

display:inline-block; /* 现代浏览器 +IE六、7 inline 元素 */

*display:inline; /* IE六、7 block 元素 */

*zoom:1; //触发ie下的hasLayout

display:inline-block后的元素为何会产生水平空隙，这真的是bug吗？这么一个神奇的属性，为什么你们一直避而远之呢？这恐怕还得从 inline-block 元素之间产生的水平空隙（间隙）提及吧。
看看 inline 元素默认的表现状况如何？原来默认就有空隙存在！它们是谁？是空白符（white space）！
那么为什么 IE六、7block元素没有产生空隙呢？其实前面也提到了IE的hasLayout，具备独立性，因此产生 hasLayout的元素之间表现出来互不影响。浏览器

解决换行解析的最终代码
其实网上有不少办法，下面只是列举，可是只贴最终的代码字体

删除html中的空白,就是不换行；
使用负边距；
给父元素设置font-size:0

其实font-size:0是最好的解决方案，可是还用到了不少兼容补救
这里还有一个问题须要注意的是：因为 inline-block 具备 inline 元素的特性，在垂直方向上不少时候咱们并不但愿元素以vertical-align:baseline方式来呈现，因此在「.dib-wrap」中统一重置为「vertical-align:top」便可。url

.dib-wrap { //这是针对父级的类

font-size:0;/* 全部浏览器 */

*word-spacing:-1px;/* IE六、7 */

}

.dib-wrap .dib{ 针对使用display:inline-block的元素

font-size: 12px; //这个给要加inline-block的元素单独设置字体

letter-spacing: normal;

word-spacing: normal;

vertical-align:top;

}

@media screen and (-webkit-min-device-pixel-ratio:0){

/* firefox 中 letter-spacing 会致使脱离普通流的元素水平位移 */

.dib-wrap{

letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/

}

.dib { //这个是display的通用写法

display: inline-block;

*display:inline; //ie6,7下用hack，将块元素转成inline后直接使用zoom:1触发ie的hasLayout

*zoom:1;

}

话说这个版本还考虑到了safari5.1.7里不letter spacing负值的绝对值大于空隙大小后，会致使元素总体位置向右偏移，以及chrome低版本下不支持font-size:0；我本身搞了个最简单的版本，由于safari6.0开始不支持windows了，也不知道怎么测兼容性，因此下面这个版本只考虑了新版chrome，firefox，以及ie6+以上。spa

#one,#two{ //父级

font-size: 0;

*word-spacing: -1px;

vertical-align: top;

}

#one span,#two div{

display: inline-block;

*display: inline;

*zoom: 1;

font-size: 14px;

border: 1px solid black;

padding: 10px;

}

什么时候用float，什么时候用inline-block?firefox

若是你须要文字环绕容器，那浮动是不二选择。若是你须要居中对齐元素，inline-block是个好选择。
使用inline-block：当你须要控制元素的垂直对齐跟水平排列时，使用inline-block。
使用浮动：当你须要让元素环绕某一个元素时，或者须要支持旧版本ie，或者不想处理inline-block带来的空白问题时，使用浮动。

上图，把一系列元素设置了浮动，由于盒子二号宽度的关系，能够发现盒子五号被挤进去了（这些元素都脱离了文档流），这是图片排列中很常见的问题。

浮动、inline-block和图像排列
若父元素中的图片等高，设置浮动就会工做正常。但一旦有一列图片比较高时，图片的排列就会出现问题。这是由于浮动后，图片脱离了文档流。而inline-block因为未脱离文档流，不会出现这个问题。若是你想再建立一列图片时，不会受到上一列图片inline:block的影响。而你在使用时须要时刻注意清除浮动，当内容不断变化时这很容易产生bug。

这里有个更明显的例子来体现inline-block跟float的区别：

上面的块级元素被设置了inline-block。因为他们没有脱离文档流，因此元素不会被某个过长的列挤上来。

谈一下float和position:absolute对于脱离文档流的关系
我主要是看了知乎上张秋怡的回答，原文地址以下：
https://www.zhihu.com/question/24529373/answer/29135021

虽然它们都能使元素脱离文档流，可是它们有个最大的区别，float后，其余元素当它不存在是没错，可是其余元素里的文字缺依然当它存在，而且被搁在外面，以下面这个float:left例子：

#one{

float: left;

width: 100px;

height: 100px;

background: deepskyblue;

}

#two{

width: 200px;

height: 200px;

background: pink;

}

</style>

</head>

<body>

<div id="one">oneoneoneone</div>

<div id="two">twotwotwotwo</div>

</body>

而若是用了position:absolute，其余元素不但总体，并且连里面的文字也当它不存在，以下面这个position:absolute例子，能够看到two里的文字都被one覆盖到下面了：

<style>