浮动模型、包裹浮动元素

浮动模型

float:left/right;

<div class="wrapper">
	<div class="content">1</div>
	<div class="content">2</div>
	<div class="content">3</div>
</div>

.wrapper{
	width:90px;
	height:90px;
	border:1px solid black;
}
.content{
	float:left;
	color:black;
	line-height:30px;
	text-align:center;
	background-color:pink;
	width:30px;
	height:30px;
}

无float

float:left;效果

float:right;效果

浮动元素产生了浮动流

出现分层效果

<div class="box"></div>
<div class="demo"></div>

.box{
	float:left;
	width:50px;
	height:50px;
	background-color:black;
	opacity:0.5;
}
.demo{
	width:100px;
	height:100px;
	background-color:green;
}

浮动元素不是完全意义的分层，只是产生了浮动流，浮动流对后面的元素影响不一样。

• 所有产生了浮动流的元素，块级元素看不到它们

• 产生了bfc的元素和文本属性的元素以及文本都能看到浮动元素。

父级元素包不住子级元素

<div class="wrapper">
	<div class="content">1</div>
	<div class="content">2</div>
	<div class="content">3</div>
</div>

.wrapper{
	border:1px solid black;
}
.content{
	float:left;
	color:#fff;
	background-color:black;
	width:50px;
	height:50px;
}

父级元素是块级元素，块级元素看不见浮动元素，所以包不住。

怎样使父级元素包住子级元素？

浮动元素产生了浮动流，浮动流对块级元素产生了影响，使块级元素看不到浮动元素了。所以只要把浮动流清除就可以了。

1.加一个p标签

<div class="wrapper">
	<div class="content">1</div>
	<div class="content">2</div>
	<div class="content">3</div>
	<p></p>
</div>

.wrapper{
	border:1px solid black;
}
.content{
	float:left;
	color:#fff;
	background-color:black;
	width:50px;
	height:50px;
}
p{
	border-top:10px solid green;
	clear:both;
}

p标签中clear的功能就是清除浮动流。清除了之后，p标签就会出现在该出现在的地方。就能把父级元素撑开。

但是要想解决一个问题，不能在结构上乱修改，所以在编程时，p标签这个结构时不能写在这里的，这样写是不正确的。

2.利用伪元素清除浮动

.wrapper::after{
	content:'';
	clear:both;
	display:block;
}
.wrapper{
	border:1px solid black;
}
.content{
	float:left;
	color:#fff;
	background-color:black;
	width:50px;
	height:50px;
}

注： 要想clear生效，必须要是块级元素才行。

3.能看见浮动元素的（包不住是因为看不见浮动元素。能看见浮动元素的也有很多。）

触发bfc，文本属性的元素以及文本都可以看到浮动元素。

设置 position:abolute; float:left/right; 后，父级元素会紧紧的包住子级元素，与上面的不同。

这是因为凡是设置了position:abolute; float:left/right; 的元素会打内部转换成inline—block;

实现文字环绕图片

利用浮动float:left; float:right;

伪元素

伪元素存在于任意一个元素里面。任意一个元素里面有两个最特殊的伪元素，before和after。

一个标签诞生的时候，它逻辑的最前面的位置和逻辑的最后面的位置就已经有了伪元素了。

伪元素和正常元素差不多可以一起使用，但它没有正常的元素结构。伪元素天生就存在，存在于每个标签里面。我们可以通过css把伪元素选择出来。

span::before{
    content:"";
    
}
span::after{
    content:"";
    
}

：：before这种形式就是把标签里面最前面的伪元素选择出来。

：：after是把标签里面最后面的伪元素选择出来。

伪元素是行级元素。 所以想要设置宽高之类的属性时，必须改成块级或者行级块元素。