html5和css篇有关浮动以及如何清除浮动_随笔

浮动和盒状模型、定位是CSS重点和难点。浮动，就是让div样式层块，向左或向右（靠）浮动。

Float:left 靠左浮动；Float:right 靠右浮动；clear:both清除浮动，简单举例如下：

CSS样式如下：

.box1{ float:left width:200px height:300px background:#f00}/* 设置div对象浮动靠左*/

.box2{ float:rightwidth:200px height:300pxbackground:#0f0}/* 设置div对象浮动靠右 */

.clear{ clear:both}/*清除浮动*/

html代码如下：

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

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

</div>

效果如下：

浮动利用好了，再结合相对定位，绝对定位，CSS排版基本上就能搞定了，细节的东西在实践中去体验吧。

写了两个例子，一个是利用这个line-height属性，一个是利用padding来设置，都达到了垂直居中的效果

<!doctype html>

<html>

<head>

</head>

<style>

*{padding:0margin: 0}

p span{float:left}

p{height:100pxline-height:100pxfont-size:25pxborder:1px solid redtext-align:center}

div span{float:leftheight:100pxpadding:30px 0pxfont-size:25px}

div{height:100pxborder:1px solid red}

</style>

<body>

<p><span>第一个文本<span></p>

<div><span>第二个文本<span></div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

html5和css篇有关浮动以及如何清除浮动