We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
绝对定位，浮动和display:ilinline-block都是界面布局中常用的设置方式，一直以为这几个属性很简单，在我眼里，想要绝对定位于一个元素时，才会用绝对定位(顾名思义？？)，想要让多个块级元素水平排列时用浮动或display:inline-block(曾经一度觉得这两种方式有些重复，感觉不到它们的区别。。所以自己常常用浮动，display:inline-block用的很少)，最近在看别人代码的时候，照着实现思路重新学习了一下这几个属性，所以这里对它们各自的特性，和彼此之间的异同点，以及何种情况该搬谁来当救兵做了一下小总结~
display:ilinline-block
display:inline-block
开始呢，还是想敲下重点，就是不管是为一个块级元素设置了display:absolute;,float:..,还是display:inline-block也好，这个块级元素的在文档流中的行为都会发生一个变化—就是，它会自动的具有包裹性了，宽度不再自适应父元素的宽度(不过绝对定位元素根据其它设置是会有例外的，稍后会提到)
display:absolute;
float:..
浮动元素可以用以下几个点来说明：
特点：包裹性，脱离文档流(实际是半脱离) 应用场景：文字环绕效果；多个块级元素水平排列于一行 应用于：块级元素和行内元素皆可
需要让多个块级元素水平排列成一行，这是经常需要做的，如左右双列布局，那么既然要让多个元素在一行上，就不能用行内元素吗？答案是，有些情况确实不能，比如说需要给这个元素指定宽和高时，行内元素是不满足需求的。还有一种常见到浮动的应用的场景是水平列表项~
通过设置为浮动让多个元素可以处于一行，这个应用的核心离不开浮动元素的特性之一—包裹性(试想如果没有包裹性了，那么这个元素水平方向的宽度会向父元素的宽度去延展，自己在水平方向就沾满了，无论如何也放不下别人和自己挤在一排了~)
虽然应用浮动后，看上去达到目的了，但不要忘了善后，清除浮动，因为如果不清除浮动的话，会严重影响其他元素的布局(因为它本身不占据文档流)，带来的后续麻烦可是大大的~~
上面也提到，浮动元素实际上是半脱离文档流，又为什么说是半脱离呢？这里不是明明说元素浮动以后不占据空间，这不就是脱离文档流了吗？看看下一个应用就知道啦~
虽然这里文字环绕效果放到了后面写，但实际上最开始之所以有float就是为了实现文字环绕效果。
float
什么是环绕直接兄弟文字呢？也就是一个浮动元素会环绕它的父元素中的文字，这些文字和它是直接兄弟的关系。
以下代码是一个没有添加浮动的图像和文字为直接兄弟元素的情况：
<style> div.outer{ width:400px; border:1px solid red; } div>img{ width:300px; } </style> </head> <body> <div class="outer"> <img src="http://p4a8bakov.bkt.clouddn.com/image/css/2018/03/19img_161967094653.jpg"> 我是应该要环绕的文字 </div>
目前真实的效果是这样的：
可以看到，此时虽然部门文字和图像是在一行的(由默认的行内元素和行内替换元素的对齐方式确实)，但也并不是包裹的效果，接下来为图像添加浮动效果：
div>img{ float:left }
现在效果是这样的，果然文字能够环绕了~：
曾经一度以为浮动元素只是对直接兄弟元素文字才有影响，但实际上它对叔侄文字内容也有同样的影响，什么是叔侄文字内容呢？简单说就是浮动元素的兄弟元素(可以是行内元素，也可以是块级元素，总之有显示标签)的文字内容，像下面这样是不加浮动的图像和它的侄子文字的关系：
div.outer{ width:400px; border:1px solid red; } div>img{ width:300px; } div.inner{ border:3px solid green; width:350px; } </style> </head> <body> <div class="outer"> <img src="http://p4a8bakov.bkt.clouddn.com/image/css/2018/03/19img_161967094653.jpg"> <div class="inner">我是应该要环绕的文字</div> </div> </body>
现在文字所在的div只是一个普通的块级元素的表现，效果如下：
div
同样地，为图像加上左浮动，效果如下：
也出现了文字环绕~可以即使文字是其它元素(如div,span等元素)的子元素，依然会受它的叔叔浮动元素的影响，并且这里有一个需要注意的点，div元素我们指定了宽度是300px,这里即使它紧邻浮动元素，它的指定宽度依然有效，只是它的宽度中的一大部分内容被浮动元素覆盖了，所以文字被挤到了div内容区的另一边,即文字并不像往常一样从父元素的最左侧开始了，(为浮动元素腾位置)，这里由div的边框就可以看到~~~
span
300px
从这上两个小节里里，我们除了体会到元素浮动后，它的直接兄弟文字/侄子兄弟文字能够环绕自己外，也能意会一下半脱离文档流：
一个元素浮动后，看上去好像不占据实际文档流空间，它的计算高度为0，进而导致它的父元素的高度为0，所以后续元素可以忽略它的存在，但是如果这个浮动元素直接兄弟元素/侄子元素是文字的话，这些文字还是会受到它的影响，去环绕这个浮动元素。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
绝对定位，浮动和
display:ilinline-block都是界面布局中常用的设置方式，一直以为这几个属性很简单，在我眼里，想要绝对定位于一个元素时，才会用绝对定位(顾名思义？？)，想要让多个块级元素水平排列时用浮动或display:inline-block(曾经一度觉得这两种方式有些重复，感觉不到它们的区别。。所以自己常常用浮动，display:inline-block用的很少)，最近在看别人代码的时候，照着实现思路重新学习了一下这几个属性，所以这里对它们各自的特性，和彼此之间的异同点，以及何种情况该搬谁来当救兵做了一下小总结~开始呢，还是想敲下重点，就是不管是为一个块级元素设置了
display:absolute;,float:..,还是display:inline-block也好，这个块级元素的在文档流中的行为都会发生一个变化—就是，它会自动的具有包裹性了，宽度不再自适应父元素的宽度(不过绝对定位元素根据其它设置是会有例外的，稍后会提到)什么时候用浮动定位元素
浮动元素可以用以下几个点来说明：
多个块级元素水平排列成一排
需要让多个块级元素水平排列成一行，这是经常需要做的，如左右双列布局，那么既然要让多个元素在一行上，就不能用行内元素吗？答案是，有些情况确实不能，比如说需要给这个元素指定宽和高时，行内元素是不满足需求的。还有一种常见到浮动的应用的场景是水平列表项~
核心要点-利用包裹性
通过设置为浮动让多个元素可以处于一行，这个应用的核心离不开浮动元素的特性之一—包裹性(试想如果没有包裹性了，那么这个元素水平方向的宽度会向父元素的宽度去延展，自己在水平方向就沾满了，无论如何也放不下别人和自己挤在一排了~)
记得善后-清除浮动(不占据文档流位置在作祟)
虽然应用浮动后，看上去达到目的了，但不要忘了善后，清除浮动，因为如果不清除浮动的话，会严重影响其他元素的布局(因为它本身不占据文档流)，带来的后续麻烦可是大大的~~
上面也提到，浮动元素实际上是半脱离文档流，又为什么说是半脱离呢？这里不是明明说元素浮动以后不占据空间，这不就是脱离文档流了吗？看看下一个应用就知道啦~
文字环绕效果
虽然这里文字环绕效果放到了后面写，但实际上最开始之所以有
float就是为了实现文字环绕效果。环绕直接兄弟文字
什么是环绕直接兄弟文字呢？也就是一个浮动元素会环绕它的父元素中的文字，这些文字和它是直接兄弟的关系。
以下代码是一个没有添加浮动的图像和文字为直接兄弟元素的情况：
目前真实的效果是这样的：
可以看到，此时虽然部门文字和图像是在一行的(由默认的行内元素和行内替换元素的对齐方式确实)，但也并不是包裹的效果，接下来为图像添加浮动效果：
现在效果是这样的，果然文字能够环绕了~：
侄子文字内容环绕
曾经一度以为浮动元素只是对直接兄弟元素文字才有影响，但实际上它对叔侄文字内容也有同样的影响，什么是叔侄文字内容呢？简单说就是浮动元素的兄弟元素(可以是行内元素，也可以是块级元素，总之有显示标签)的文字内容，像下面这样是不加浮动的图像和它的侄子文字的关系：
现在文字所在的
div只是一个普通的块级元素的表现，效果如下：同样地，为图像加上左浮动，效果如下：
也出现了文字环绕~可以即使文字是其它元素(如
div,span等元素)的子元素，依然会受它的叔叔浮动元素的影响，并且这里有一个需要注意的点，div元素我们指定了宽度是300px,这里即使它紧邻浮动元素，它的指定宽度依然有效，只是它的宽度中的一大部分内容被浮动元素覆盖了，所以文字被挤到了div内容区的另一边,即文字并不像往常一样从父元素的最左侧开始了，(为浮动元素腾位置)，这里由div的边框就可以看到~~~半脱离文档流
从这上两个小节里里，我们除了体会到元素浮动后，它的直接兄弟文字/侄子兄弟文字能够环绕自己外，也能意会一下半脱离文档流：
什么时候用绝对定位元素
The text was updated successfully, but these errors were encountered: