CSS 浮动原理

最新推荐文章于 2021-04-22 17:46:54 发布

清儿风儿

最新推荐文章于 2021-04-22 17:46:54 发布

阅读量1.4k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/gqguo/article/details/50491851

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS浮动原理：

<title>浮动原理</title>
<style>
div,span{width:100px;height:100px;background:red; }
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>

google:

IE9

span是内嵌元素，不支持宽高。

css样式改成：

div,span{width:100px;height:100px;background:red; display:inline-block;}

google:

IE9：

IE6\7下：

可以看到IE6下，块元素竖着显示还充满整行，内嵌元素竖着显示，可见在IE6、7下不支持块标签。

去掉宽和两个div之间的回车：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动原理</title>
<style>
div,span{height:100px;background:red; display:inline-block;}
</style>
</head>
<body>
<div class="div1">div1</div><div class="div2">div2</div>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>

google:

IE9:

IE6\7还是老样，不支持块元素。

总结inline-block:

1.使块元素在一行显示

2.使内嵌支持宽高

3.换行被解析了

4.不设置宽度的时候宽度由内容撑开

5.在IE6,7下不支持块标签

加浮动元素：float：left

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div,span{height:100px;background:red;border:1px solid #000; float:left;}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>

google：

IE9:

IE7:

浮动:

1.使块元素在一行显示

2.使内嵌支持宽高

3.不设置宽度的时候宽度由内容撑开

4.换行不解析。

浮动：left、right、none

上面改成右浮动right时，显示如下：

文档是由上到下解析的，先是第一个div1元素，它先动，移动到最右边后停止，然后是第二个div2元素往右边靠，当遇到div1时候便停止，后面的依次，所以就成了上图那样。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box1{ width:100px;height:100px;background:red; }
.box2{ width:100px;height:100px;background:blue;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>

google:

IE7:

给box1加左浮动：float:left;

google:

IE7:

给box2的宽高变大点，加到200px看看，google下显示：

可以看到，box2其实是跑到红色box1的下面去了

首先，加float这个命令的元素漂浮起来，然后再向左（右）边去移动。这里涉及到文档流。所谓文档流，百度百科解释：文档中可显示对象在排列时所占用的位置。将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)。

（PS：比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position来控制。看看CSS 2.0对position的定义：检索对象的定位方式。共有5个取值。 static：默认值，无特殊（静态）定位。对象遵循HTML定位规则。 absolute：绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 fixed：固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。当对象定位在浏览器窗口以外，浏览器不会因此显示滚动条，而当滚动条滚动时，对象始终固定在原来位置。 relative：相对定位。对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 inherit：继承值，对象将继承其父对象相应的值。）

这里，按道理说，box1是块标签，应该是占了一行的位置，但是加了float之后，box1“漂浮”起来了，变成不按原来的占用空间了，所以说，加浮动后，这个元素脱离了文档流。

再看例子：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{ font-size:20px;}
.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue;}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>

google：

按道理说，内容“box2”应该被盖住的，可显示出来的“box2”内容别挤出来了！

这里，把box2的宽高再设置成100px，看显示如下：

可以看到，内容“box2”被挤出来了！

其实我们可以这样理解，元素是可以被分成两层的，一层是元素本身，包括边框、背景等；还有一层是内容，元素里面放的元素、文字、图片等内容等；可得出，添加浮动其实只浮动了半层，也就是元素本身浮动起来了，但是元素里面的内容却没有浮起来，所以被挤出来了。

总结浮动：

left/right/none

元素加了浮动，会脱离文档流，按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止

1.使块元素在一行显示

2.使内嵌支持宽高

3.不设置宽度的时候宽度由内容撑开

4.脱离文档流

5.提升层级半层

** 文档流是文档中可显示对象在排列时所占用的位置

----------------------------------------------------------------------------------------------------------------------------------------

清浮动：clear： left/right/both/none 元素的某个方向不能有浮动元素

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{ font-size:20px;}
.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue; clear:left;}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>

google下面显示：

加上float：left;后box左边不能有浮动元素，所以box2挤到下面一行来了。

如果把float：both;就是box2左右两边都不能有浮动元素，显示效果跟上面一样。

下面来个栗子，要实现下面这个布局：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>应用实例</title>
<style>
body{ margin:0; font-size:--20px;}
.box{width:900px;margin:0 auto;}
.box div{ width:300px;}
.left1{ height:200px;background:red; float:left;}
.left2{ height:300px;background:blue; float:left;}
.left3{ height:240px;background:green; float:left;}
.left4{ height:300px;background:pink; float:left;}

</style>
</head>
<body>
<div class="box">
	<div class="left1"></div>
	<div class="left2"></div>
	<div class="left3"></div>
	<div class="left4"></div>
	<div class="left5"></div>
</div>

</body>
</html>

google：

pink的div在左浮动的时候，第一行挤不下，跌到下一行，在往左边移动过程中遇到同样是浮动的blue卡住过不去，所以就停止移动显示成这样子。

接着再加left5样式：

.left5{ height:100px;background:#000000; float:left;}

google：

发现黑色feft5又掉到下一行去了！其实在元素浮动过程中，他们会尽量跟前一个元素的顶部对齐，pink要和绿色的顶部对齐，因为宽度不够，只能挤到下一行，新加进来的black也想和pink顶部对齐，也是因为宽度不够，所以挤下来了，这样所有布局就乱了!在工作中不会采用这样的布局。

看代码，这才是工作中最常用的布局：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{margin:0;}
.box{width:900px;margin:0 auto;}
</style>
</head>
<body>
<div class="box">
	<div class="left">
    	<div></div>
        <div></div>
    </div>
    <div class="center">
    	<div></div>
        <div></div>
        <div></div>
    </div>
    <div class="right">
    	<div></div>
        <div></div>
    </div>
</div>
</body>
</html>

加上样式最后代码为：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{margin:0;}
.box{width:900px;margin:0 auto;}
.left{width:300px;float:left;}
.left div{height:298px; background:#9F0;border:1px solid #fff;}
.center{width:300px;float:left;}
.center div{ height:198px;background:#CF0;border:1px solid #fff;}
.right{width:300px; float:right;}
.right div{ height:298px;background:#FF0;border:1px solid #fff;}

</style>
</head>
<body>
<div class="box">
	<div class="left">
    	<div></div>
        <div></div>
    </div>
    <div class="center">
    	<div></div>
        <div></div>
        <div></div>
    </div>
    <div class="right">
    	<div></div>
        <div></div>
    </div>
</div>
</body>
</html>

清儿风儿

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS 浮动原理

CSS浮动原理：浮动原理div,span{width:100px;height:100px;background:red; }div1div2span1span2 google:IE9span是内嵌元素，不支持宽高。css样式改成：div,span{width:100px;height:100px;background:red; displa
复制链接

扫一扫

专栏目录