您的位置：首页 > Web前端 > CSS

CSS_4th_浮动float

2017-03-26 18:44 176 查看

一、CSS浮动

1）float是CSS样式中的定位属性，用于设置标签的居左浮动和居右浮动，浮动后的元素不属于html文档流，需要用清除浮动把文档拽回到文档流中。

2）浮动值：

left:向左浮动

right:向右浮动

html文档流:窗体自上而下分成一行一行，并在每行中按从左到右的顺序排放元素。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div:not(.clear){ width: 200px; height: 200px;}
.d1{ background: red; float: left;}
.d2{ background: blue; float: left;}
.d3{ background: green;}
.clear{clear: both;}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="clear"></div>
<div class="d3"></div>
</body>
</html>

总结：

①红色和蓝色div本来设置为了浮动，脱离了文档流，并排排在一行中，但被另一个div清除了浮动（通过clear属性），使得红色和蓝色div又重新回到了文档流中，此时依然是并排状态，这样设置浮动-清除浮动的做法可以使多个块级元素div排在同一行中，达到不换行的效果。

②这样，接下来的绿色div就会排在两个div的后面，由于浮动已经清除，就不会因为浮动的效果被挡住。

网页效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css 浮动 float

相关文章推荐

新的分享

章节导航