CSS浮动---浮动篇
- 浮动
| 定义 |
| 指定元素在哪个方向上浮动。
|
| 属性值 |
|
left - 元素向左浮动
right - 元素向右浮动
none - 元素不浮动，并且会显示在其在文本中出现的位置
inherit - 从父元素继承属性值
|
上一篇当中我们讲解了文档流，最后我们看到了，当使用行内块元素，可以设置一些容器宽高相同，而且也可以再同一行中，但是问题出现了。设置其中的一个元素的margin-top就会把行高撑开其他元素也会下来。因此我们就需要使用浮动来解决了。
没有浮动之前的样子。
设置了div0做了浮动。我们看到当设置了div0，也就是蓝色的块浮动了，橙色的div1块就不见了，但是内容2被留了下来。
- 蓝色的div0浮动意味着，蓝色块脱离了原来的文档流，也就是页面的文档流中把蓝色的块删除了。有人可能就要问，删除了，怎么能看到，这里确实是从文档流中删除了，但是确以浮动的形式放在了页面上，也就是相当于在文档流的上面多了一个层放置了这个蓝色的块。注意，蓝色的块是放在上面浮动的层里，并不是原来的文档流的层里了。
- 橙色的div1块去哪里了？因为蓝色的块去了浮动层里了，因此原来文档流这个位置就空出来了。这时候橙色的块就去了蓝色块的后面。因为两个块一样大，因此，蓝色块遮盖了橙色块。我们更改一下橙色的宽度可以看到橙色在下面。
- 这个2的文字在做什么，怎么位置会变化？
首先我们先说明如果蓝色块做了浮动，蓝色块以外的其它行内元素并不会补充到蓝色块原有所占的位置，只有块元素才会补充进去，也就是说只有块元素才会到蓝色块的后面，其它的行内元素只会环绕这个浮动块，包括其它块元素中的行内元素也会环绕在蓝色块旁边
例如下列
这是浮动特有的作用只针对块元素填补，这样我们就可以做图文混排了，后面再说
再来说说上面的橙色块120像素的比蓝色块大一些，我们可以看到里面的2也是环绕蓝色块了，并且在蓝色块的右边。但是如果橙色块也是100像素，这时候那个2就到了蓝色块的下边，这是因为橙色块就100像素，但是2必须环绕蓝色块，无法放在右侧了，超出范围了，因此就放在了下方。
- 为什么会出现这种行内元素环绕呢？注意观察一下。
默认情况下我们没有做浮动的蓝色块，虽然设置了宽高，但是我们看到仍然占据了一行，下面的文字并没有移动上去。因为块元素在文档流中就是占据一行，并不能因为设置宽高就可以减少占据的范围。但是当我设置左浮动后，我们惊奇的发现，这时候块元素脱离了文档流，它在浮动层上了，不会占有文档流中的一行了，但是仍然占有它默认宽高的行内元素范围。看下图
这时候行内元素就会紧贴着这个浮动块元素的范围了。但是块元素，为什么没有紧贴在旁边，而是插在了背后呢，因为块元素是独占一行的，前面的位置当然也是行内了，所以就藏在背后了。
现在大家应该清楚为什么会出现这种情况了。
- 浮动紧贴。
当给多个块元素做了浮动，我们会发现这些块都会进入浮动层，刚才我们说过块元素变成浮动块了，进入了浮动层，这个块元素的宽高就是它占位的大小了，而不是独占一行了，因此下一个进入浮动层的块元素就会紧挨着它，像文字一样一个接着一个
直到页面剩余的宽度比这个块的宽度小时，就会自动换行。
- 浮动顺序依靠
上面说到了浮动块的宽度就是它占位的大小，也就是说它不再是以一行的位置来判断了，而是以宽高位置来判断了。在文档流中我们都是以一行内容接一行内容的顺序来放置的。但是进入了浮动层，就不是独占一行了。而是以视觉方式来展示，也就是宽高位置。
可以看到因为页面的宽度变化，首先绿色块的宽度大于了剩余的宽度，就会换位置了，注意，不是换行，换的位置应该在哪里呢？先考虑能自己最近的下一个能盛下自身宽度的位置，这时候就排到了橙色的下面。紧接着页面在缩小，又是绿色块盛不下了，这时候绿色块找到最新的位置是蓝色块的下面。继续缩小时，橙色块盛不下了。这次并不是找到绿色块下面，而是蓝色块和绿色块中间，因为是按照顺序紧贴排列的。
- 自动收缩性
如果块元素设置了宽高，然后做浮动，我们知道它的宽高就是设置的，但是如果没有设置宽高，那么他就会根据内容自动收缩宽高
至此浮动的基本内容也介绍完了。下面我们根据案例了解浮动的一些使用技巧
- 左右分离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
{
width: 200px;//设置容器的宽度
height: 200px;//设置容器的高度
background-color: dodgerblue;//设置容器的背景色
word-wrap: break-word;/*自动换行*/
margin-top: 10px;//设置容器距离顶端位置
}
//设置容器里的第一个span元素
#div0 span:first-of-type
{
float: left;//左浮动
}
//设置容器里的最后一个span
#div0 span:last-of-type
{
float: right;//右浮动
}
</style>
</head>
<body>
<div id="div0"><span>左边</span><span>右边</span></div>
</body>
</html>
|
- 首字下沉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
{
width: 200px;/*设置容器的宽度*/
height: 200px;/*设置容器的高度*/
background-color: dodgerblue;/*设置容器的背景色*/
word-wrap: break-word;/*自动换行*/
margin-top: 10px;/*设置距离顶部外边距*/
}
/*设置div容器中第一个文字*/
#div1::first-letter
{
font-size: 50px;/*设置字体大小*/
float: left;/*设置这个文字浮动*/
line-height: 60px;/*设置这个文字的行高*/
}
</style>
</head>
<body>
<div id="div1">首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉</div>
</body>
</html>
|
- 双飞翼布局
双飞翼布局就是保证两边的宽度不变的基础上，缩窄页面的宽度，不会换行，两边的宽度仍然不变，中间的的宽度随着页面的宽度变化而变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*
{
margin: 0;/*默认清除所有标签的外边距*/
padding: 0;/*默认清除所有标签的內间距*/
}
#middle,#left,#right
{
float: left;/*设置三个大的div分别做浮动*/
height: 50px;/*设置他们的高度是50像素，当然实际是随着内容多少自动适配高度，所以不设置，这里是为了可以看到*/
}
#left
{
width: 200px;/*设置左边容器的宽度是200像素*/
/*设置为左边距-100%，这意味着把这个左边的div提到上一行的现在所在的位置，100%是页面宽度，-100%就是向前提前一个页面宽度*/
margin-left:-100%;
background-color: dodgerblue;/*设置背景色蓝色*/
}
#middle
{
width: 100%;/*设置中间的容器宽度是100%也就是页面的宽度，所以这个容器的宽度就会随着页面宽度变化而变化*/
background-color: greenyellow;/*设置容器的背景色是绿色*/
}
#right
{
width: 200px;/*设置右边容器的宽度是200像素*/
margin-left: -200px;/*设置右边容器向左-200像素，这个做的是左浮动，所以现在是紧贴页面最左面，因为上面的已经把上一行都占满了，现在向左-200像素，意味着提到上一行距离最右边200像素*/
background-color: orange;/*设置背景色是橙色*/
}
#middleContent
{
/*这个是中间容器里的容器，因为没有设置宽高，所以这个容器的会自动100%宽度*/
margin-left: 200px;/*左边距是200像素*/
margin-right: 200px;/*右边距是200像素*/
/*上面设置了左右边距正好是左右容器的宽度，因此实际里面内容也就不会写在左右容器的位置了*/
word-wrap: break-word;/*自动换行*/
}
</style>
</head>
<body>
<div id="middle">
<div id="middleContent">主内容区域主内容区域主内容区域主内容区域主内容区域主内容区域主内容区域主内容区域主内容区域主内容区域主内容区域主内容区域</div>
</div>
<div id="left">左侧区域</div>
<div id="right">右侧区域</div>
</body>
</html>
|