深入理解css浮动,定位

1.不同类型元素的宽高特性

.outer{
	background-color: green;
	height: 10px;
}

<div class="outer">
    <div class="inner"></div>
</div>

对于以上代码,浏览器中显示如下,我们可以发现,当div元素处于文档流中时,虽然没有设置它的宽度,但是他仍然占满了父元素宽度.

这是因为div是一个块元素,对于块元素,如果没有显式设置,它的宽度默认为父元素的100%;而对于内联元素,它的宽和高由它所包含的内容决定,并且它的width和height是不可设置的(可以用line-height来调整行的高度,用元素的水平内边距,边框,外边距来调整元素的宽度);最后对于行内块元素(inline-block),它们可以像内联元素一样在一行内显示,宽高由内容觉得,而且可以显示设置它们的宽高.

2.脱离文档流

当元素设置为float时,它的高度会脱离文档流,不再占据父元素的高度.同时对于块元素,它的默认宽度不再是父元素的百分之百,而是变成包含内容的宽度.

.outer{
	background-color: green;
	height: 10px;
	position:absolute;
}
.inner{
	margin-top: 30px;
	float:left;
	width: 300px;
	height: 300px;
	background-color: red;
}

<div class="outer">
		<div class="inner"></div>
</div>

对于以上代码先将父元素设为absolute定位,然后将子元素设为浮动,此时会发现父元素的宽度和子元素一样,说明浮动元素的宽度并未脱离文档流.

当元素设置为absolute定位或者fixed定位时,元素会完全脱离文档流,不再占据父元素的宽度和高度空间.

.outer{
	background-color: green;
	height: 10px;
	position:absolute;
}
.inner{
	margin-top: 30px;
	position:absolute;
	width: 300px;
	height: 300px;
	background-color: red;
}

<div class="outer">
		<div class="inner"></div>
</div>

将子元素的浮动去掉,改为absolute定位,此时子元素脱离文档流,父元素的宽度直接变为0,父元素在屏幕上消失.

给它增加一点内容会发现它又显示出来了

<div class="outer">
    1234564879<div class="inner"></div>
</div>

3.深入理解浮动

上面提到浮动时元素的宽度未脱离文档流,其实并不准确,实践的时候会发现很多问题,例如以下代码:

div{
	height:300px;
}
.div1{
	float:left;
	background-color: red;
	width:300px;
}
.div2{
	background-color: green;
}
.div3{
	width: 100px;
	height: 100px;
	background-color: yellow;
}

<div class="div1"></div>
<div class="div2">
    <div class="div3"></div>
</div>

我们会发现屏幕上并没有显示出div3元素,打开开发者工具看一下div3的位置会发现,div3跑到了红色区域的左上角,

然后我们给div元素增加一点内容再试一下

<div class="div1"></div>
<div class="div2">
    <div class="div3"></div>
</div>

会发现内容直接出现在下方了,

我们把.div3的样式去掉再试一下,

div{
	height:300px;
}
.div1{
	float:left;
	background-color: red;
	width:300px;
}
.div2{
	background-color: green;
}
/*.div3{
	width: 100px;
	height: 100px;
	background-color: yellow;
}*/

结果,内容又出现在了浮动的div1的右侧

div是块状元素,那么其他类型元素会不会有不同的表现?换一个内联元素试一下,在div2中把div3换成一个strong元素

<div class="div1"></div>
<div class="div2">
    <strong>content</strong>
</div>

结果如下图:

strong元素的内容出现在div1的右侧,给strong增加一点背景色,看看strong元素本身在哪里

strong{background-color:yellow;}

结果发现,strong元素的位置和内容是一致的

我们再换一个内联块状元素img试一下,

<div class="div1"></div>
<div class="div2">
    <img src="Image/img1.gif">
</div>

结果如图,

把img的内容去掉,加一些样式试一下,

<div class="div1"></div>
<div class="div2">
    <img>
</div>

img{width: 100px;height: 100px;background-color: red}

结果会发现,img仍然在原来位置.

浮动对于元素的影响是不是真的和元素的display属性(元素类型)有关呢,我们把刚开始的例子div3的display属性改为inline-block试一下

div{
	height:300px;
}
.div1{
	float:left;
	background-color: red;
	width:300px;
}
.div2{
	background-color: green;
}
.div3{
	display: inline-block;
	width: 100px;
	height: 100px;
	background-color: yellow;
}

<div class="div1"></div>
<div class="div2">
    <div class="div3"></div>
</div>

在没有内容时,div3也显示在div1的右侧了,和inline-block元素img一致,

加一点内容试一下,

 <div class="div3">content</div>

div3的表现还是和img一致,基本上可以说明,浮动元素对其他元素的影响和其他元素的display属性(元素类型)有关,

总结一下就是,

浮动元素对于block元素来说,他的宽度和高度都脱离文档了,不再占据空间

浮动元素对于inline-block元素来说,他的宽度仍然占据文档空间

浮动元素对于inline元素来说,他的宽度仍然占据文档空间,

当浮动元素影响的block元素中内容不为空时,block元素本身仍然不显示,位置也不发生改变,但是若他的内容是一个匿名内联元素,则必须显示出来,所以此时他的内容会脱离block元素,并应用清除浮动,显示在浮动元素下方.