这是我参与8月更文挑战的第25天，活动详情查看：8月更文挑战
今天我们来聊聊浮动模型float
通过属性float:left/right
- 可以让元素站队，左浮动或者右浮动；
- 浮动模型的本质是：浮动元素产生了浮动流；
但是包裹浮动元素，会有一个外层包裹不了浮动元素的现象，如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>包裹浮动元素</title>
<style>
.wraper{
border: 1px solid rgb(3, 54, 3);
}
.left{
height: 100px;
width: 100px;
background-color: rgb(178, 127, 224);
float: left;
}
.right{
height: 100px;
width: 200px;
background-color: rgb(224, 211, 18);
float:right;
}
</style>
</head>
<body>
<div class="wraper">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
原本外围容器如果没有设置高度，其高度会由内容撑开，那为什么撑不起来呢。原因是所有产生了浮动流的元素，块级元素看不到他们，只要但产生了bfc的元素和文本类带有inline属性的元素以及文本都能看到浮动元素。那怎么办？其实，源于浮动流终于浮动流，我们可以通过清除浮动流的方式来解决这个问题。
利用伪元素清除浮动流
.wraper:after{
content:'';
display:block;
clear:both;
}
解决！
注： 伪元素天生就存在任意一个元素里， 清除浮动使用者必须是块级元素； 有两个伪元素：
- :before
- :after
其他零散知识点
- 凡是设置了position：absolute以及float：left/right的元素，实质内部自动变成了inline-block元素。
- 凡是带有inline的元素都有文本的特点，叫文本类元素，包括inline和inline-block元素。
- 溢出容器打点显示
white-space:nowrap;文字不换行
overflow:hidden;超出部分隐藏
text-overflow:ellipsis；打点
- 一般行内元素只能嵌套行内元素，特别的：a标签不能嵌套a标签； 一般块级元素可以嵌套任何元素，特别的：p标签不能嵌套块级元素；
以上就是本文的都是有内容，欢迎点赞支持
