陈力：传智播客古代珍宝币泡泡龙游戏开发第十一讲：浮动

最新推荐文章于 2024-09-26 17:21:02 发布

zhenbaobe

最新推荐文章于 2024-09-26 17:21:02 发布

阅读量622

点赞数

本文链接：https://blog.csdn.net/zhenbaobe/article/details/46969427

版权

陈力：传智播客古代珍宝币泡泡龙游戏开发第十一讲：浮动

摘要：通过前节学习了的DIV+CSS中div+CSS中盒子模型进行介绍,本节详细讲解了浮动、清除浮动等相关知识。以方便建设人员在网站建设中加深对PHP教程的了解。本节陈力：传智播客古代珍宝币泡泡龙游戏开发第十一讲：浮动。

什么是DIV+SCC的盒子模型？
在网站建设中关于内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式这些属性。一个盒子模型由内至外由content（内容），padding（填充），border(边框)，margin(边界)四部分组成，如图所示。[了解更多]深入理解盒子模型

浮动：

浮动是css中很重要的概念，必须掌握。浮动涉及到左浮动、右浮动、清除浮动。所谓浮动就是让设置的标签产生漂浮效果，脱离原来在页面本应出现的空间位置，不再占用任何文档流空间。元素设置为浮动以后，会生成一个块级元素，而不论它本身是何种元素，行标签则自动转成块元素，display:block;。且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。该属性值有 inherit|none|left|right 四种取值，其中 none 为默认值，也就是标准流通常的显示状态；inherit 将会从祖先元素获取 float 值，left 或 right，表示当前标签会向其父容器标签的左侧或右侧靠拢。

例子:请在页面中放置三个div ,背景是粉红，宽度150px,高100px，边框1px,蓝色,实线。

软件设计,贵阳网站建设

(1)右浮动
如果我们要实现如下图形，就可以使用右浮动,当把div1向右浮动时,它脱离标准流并且向右移动，直到它的右边缘碰到包含框的右边缘。

（2）左浮动

如果我们要实现如下图形，就可以使用左浮动,如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如果我们的div框很多,外面的框无法容纳水平排列的浮动div元素，那么其它浮动块向下移动，直到有足够的空间。

如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

.div1{
width:150px;
height:100px;
border:1px solid blue;
background: pink;
margin-top:5px;
float:left;/*左浮动*/
}

从这个案例我们可以看出，所谓左浮动就是指: 某个块元素尽量向左边移动，这样就让出它右面的空间，让别的块元素显示。
你可以这么理解浮动:如果一个元素右/左浮动则:
①它本身会尽可能向右/左移动，直到碰到边框或者别的浮动元素,特别强调浮动对块元素和行内元素都生效!
②元素向右/左浮动，就相当于让出自己的左/右边,别的元素就会在它的左/右边排列。

字包图效果：

软件设计,贵阳网站建设

字包图网站建设源html代码如下：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<img style="float:left;margin-right:5px;" src="2.jpg"/>程序设计………………………….
</body>
</html>

(3)浮动-清除浮动

如果不希望别的元素在某个元素的左边或者右边，可以使用清除浮动的方法 clear:right ; clear: left; clear:both
如果使用浮动属性：则该元素不管是不是块元素，都会按照 display: block来显示.

总结：本节介绍了“《陈力：传智播客古代珍宝币泡泡龙游戏开发第十一讲：浮动》第十一讲：浮动”的相关知识，对DIV+SCC的盒子模型有一定了解，这对于在网站建设过程中的网页布局非常有用，也是网站优化和SEO优化必须掌握的相关知识。对盒子模型进行了简单介绍，并介绍了浮动、左浮动、右浮动、清除浮动等内容。希望这篇文章对于网站建设的朋友有一定的帮助。谢谢阅读！

【推荐阅读】