css浮动模型float问题
2020-02-06 本文已影响0人
tangrl
float模型属性
- left:向左浮动
- right:向右浮动
float模型需要注意的几点
- 块级元素和行内元素（行内元素不可指定宽高）都可以浮动，当一个行内元素浮动以后将会自动变为一 个块级元素，即使设置display:inline以后其依然是个块元素
- 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕 在元素的周围。
- 元素浮动以后即完全脱离文档流，不再在文档中在占用位置。也不会再影响父元素的高度，也就是浮动元素不会撑开父元素。这是由于浮动流所产生的，下面我们来讨论如何解决浮动流问题。
清除浮动流的方法
清除浮动流的方法很多。推荐文章
但是在实际开发中一般都会写一个.clearfix的css选择器,然后使用:after伪元素来清除浮动流，父级元素使用clearfix这个选择器。看下面的代码和演示。
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
/* 利用父级元素伪元素来清除浮动流，可以解决父级元素未设置高float影响四周和塌陷问题 */
.clearfix::after{
content: " ";
height: 0px;
visibility: hidden;
display: block;
clear: both;
}
/* 上面就是利用伪元素清除浮动流的代码 */
.wrapper{
width: 400px;
border: 1px solid black;
}
.content1{
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.content2{
height: 100px;
width: 100px;
background-color: green;
float: left;
}
.content3{
height: 100px;
width: 100px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="wrapper clearfix">
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
</div>
</body>
</html>
