css float属性使用方法详解|三体教程
文章目录

css float属性使用方法详解

css中float属性的作用,是定义元素在哪个方向浮动。

float有四个值可选,分别是:

left:元素向左浮动。

right:元素向右浮动。

none:默认值。元素不浮动,并会显示在其在文本中出现的位置。

inherit:规定应该从父元素继承float属性的值。

在网页设计中,float属性是经常都会用到的。

比如说将多个div并排显示。

因为div是块级元素,如果你不设置float,它们将会每一个在一行显示。

如果要将多个div并排显示,请看下面示列。

html代码<style>
div{width:200px; height:123px;}
.div1{float:left; background:#ccc;}
.div2{float:left; background:#ddd;}
.div3{float:right; background:#eee;}
</style>
<div class="div1">我是div1,靠左浮动。</div>
<div class="div2">我是div2,靠左浮动。</div>
<div class="div3">我是div3,靠右浮动。</div>
亲自测试一下

但是如果,一行的空间宽度不足以容纳需要一排显示的多个浮动元素的总宽度,那么它将会换到下一行显示,至到有足够的空间为止。

如下实例

html代码<div style="width:450px;">
    <div class="div1">我是div1,靠左浮动。</div>
    <div class="div2">我是div2,靠左浮动。</div>
    <div class="div3">我是div3,靠右浮动。</div>
</div>
亲自测试一下

在float浮动样式中,只有靠左或靠右,并没有居中的样式,这点需要记住。

本文网址:http://www.santii.com/article/69.html


数据更新时间:2018-07-22