css float和absolute脱离文档流的问题

51 阅读 0 评论 34 点赞

我是靠谱客的博主负责大树，最近开发中收集的这篇文章主要介绍css float和absolute脱离文档流的问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

CSS中的布局默认是从上到下（块元素），从左到右（行内元素），有时候就需要左右排列

float

让元素浮动，以前用的比较多，在css3没出来之前这个挺好用的。让当前元素浮动，实现左右布局，部分脱离文档流，父元素高度塌陷等，给元素设置了float属性后其紧随其后的块元素会无视设置float属性的元素，但是后面元素的文本依然会为float元素让出位置，环绕于周围

float：letf|right|none;

清除浮动：

clear:both|left|right; //禁止左右出现浮动元素 both：左右，left：左，right:右

例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item {
width: 300px;
height: 100px;
}
.d1 {
background: red;
}
.d2 {
background: #1f9bb1;
}
.d3 {
height: 150px;
float: left;
background: #00294b;
}
.d4 {
background: blue;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="content">
<div class="item d1"></div>
<div class="item d2"></div>
<div class="item d3"></div>
<div class="item d4"></div>
<div class="clear"></div>
</div>
<script>
</script>
</body>
</html>