css浮动

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

一.浮动定位

什么是定位：元素在网页中出现的位置

定位分类：

1、普通流定位

2、浮动定位

3、相对定位

4、绝对定位

5、固定定位

1、普通流定位(文档流)

网页中默认的定位方式

1、块级元素：从上到下

2、行内元素：从左到右

2、浮动定位

1、什么是浮动定位：

1.将元素排除在普通流之外,元素在网页上是不占用空间的。

2.浮动元素会放在包含框的左边或右边，但依然在包含框内

3.浮动元素在浮动时，可以向左或向右移动直到碰到包含框或其他浮动元素位置

2、特点

1、浮动元素外边缘不会超过父元素的边框

2、浮动元素默认不会重叠

3、浮动只能左右浮动，不能上下浮动

4、所有元素设置为浮动元素的话，默认将转换为块级元素

3、浮动属性

属性：float

取值:

none : 无浮动(默认)

left : 左浮动

right: 右浮动

注意：

在一个容器内，如果有浮动元素的话，那么尽可能的让该容器中所有的元素都浮动起来。如果有想在下一行内显示的内容（不浮动的）单独使用容器来承装。

例如，在一个div框中，放置3的子div块，分别让他们左浮，则会水平排放

<!DOCTYPE html>
<html>
<head>
<style>
#parent{
width:200px;
height:200px;
border:1px solid red;
}
#d1{
border:1px solid black;
width:50px;
height:50px;
float:left;
}
#d2{
border:1px solid black;
width:50px;
height:50px;
float:left;
}
#d3{
border:1px solid black;
width:50px;
height:50px;
float:left;
}
</style>
</head>
<body>
<div id="parent">
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
</div>
</body></html>

复制代码

其显示效果如图：

4、清除浮动

属性:clear

作用：清除浮动所带来的影响，定义了元素的哪个边上不允许出现浮动元素

取值：left/right/both

上述例子中，如果div1不浮动的话，则#d1会被#d2盖住，要想消除这种影响，则需要用到clear元素，

<!DOCTYPE html>
<html>
<head>
<style>
#parent{
width:200px;
height:200px;
border:1px solid red;
}
#d1{
width:50px;
height:50px;
border:1px solid red;
clear:left;
}
#d2{
border:1px solid black;
width:50px;
height:50px;
float:left;
}
#d3{
border:1px solid black;
width:50px;
height:50px;
float:left;
}
</style>
</head>
<body>
<div id="parent">
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
</div>
</body></html>

复制代码

5、浮动引发的问题

包含框内的元素被应用了float之后，包含框的高度会发生变化（变为0）

解决方案：overflow:hidden;

浮动在网页制作中应用较多，要熟练掌握它的使用规则，可以找些例子，模仿着例子敲代码，加强对浮动作用的领会。

[HTML5开发] css浮动

[HTML5开发] css浮动

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

浏览过的版块

用微信扫一扫