在CSS 中,用 float 和 position 的区别是什么

html-css06

在CSS 中,用 float 和 position 的区别是什么,第1张

float是浮动,你也可以理解为左对齐或者右对齐,float只有一层,也就是没有浮动的是1层,浮动了的是1层,没有浮动的元素会挨个往下排,浮动的会挨个往下排。

position 是定位,可以随心所欲的定位,想定哪定哪,他有无数层(实际是有最大值的)由z-index控制,每一层和每一层都能重叠

CSS中的float浮动属性,一般用于标签对象(例如:<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签)的浮动布局,而浮动也就是我们常说的标签对象居左靠左和居右靠右)。同时float浮动属性一般只对块级元素有效。“块级元素你可以通俗的理解为占一行并且大小可以控制的元素”。

float的属性值:left(靠左浮动),right(靠右浮动),none(不使用浮动,为默认值)

float属性的使用案例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

.divcss5{ width:400pxpadding:10pxborder:1px solid #F00} 

.divcss5_left{ float:leftwidth:150pxborder:1px solid #00Fheight:50px} 

.divcss5_right{ float:rightwidth:150pxborder:1px solid #00Fheight:50px} 

.clear{ clear:both}

</style>

</head>

<body>

<div class="divcss5"> 

    <div class="divcss5_left">布局靠左浮动</div> 

    <div class="divcss5_right">布局靠右浮动</div> 

    <div class="clear"></div><!--清除float产生浮动--> 

</div> 

</body>

</html>

运行效果: