CSS的float属性应用

最新推荐文章于 2021-08-03 20:09:14 发布

追赶的蜗牛

最新推荐文章于 2021-08-03 20:09:14 发布

阅读量635

点赞数

分类专栏： CSS 技术学习

技术学习同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

CSS

8 篇文章 0 订阅

订阅专栏

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

值：

left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。（IE不支持）

例子:

<html>
<head>
<style type="text/css">
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>

<p>
在上面的段落中，div 元素的宽度是 120 像素，它其中包含图像。div 元素浮动到右侧。

我们向 div 元素添加了外边距，这样就可以把 div 推离文本。同时，我们还向 div 添加了边框和内边距。
</p>
</body>

</html>

============================================================================

除此之外还可以用div把页面分成左右两块

内容右边的内容</div>

这样点击左侧的链接，就对应在右侧显示内容啦！！！

============================================================================

创建水平菜单

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;//设置列表项标记的类型如实心圆、实心方块、数字等等

}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300} //鼠标经过是变色
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（inline元素前后没有换行）。

这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。

我们添加了颜色和边框，以使其更漂亮。
</p>

</body>
</html>