一条竖线的写法
实现原理：
利用浮动,设置width:1px
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>解决浮动导致的页面非正常显示</title><style>.box1 {border: 2px solid rgb(116, 44, 44);}/* 解决高度塌陷 */.clearfloat::after {content: "";display: block;visibility: hidden;height: 0px;clear: both;}#box2 {float: left;width: 100px;height: 100px;background-color: #f00;}/* 竖线 */#col-line {float: left;width: 1px;height: 200px;background: blueviolet;}#box3 {float: right;background-color: #ff0;width: 100px;height: 200px;}</style>
</head><body><div class="box1 clearfloat"><div id="box2"></div><div id="col-line"></div><div id="box3"></div></div></div></div>
</body></html>
