一、浮动的定义：元素脱离文档流，按照指定的方向移动，遇到父级边界换行
二、浮动的作用：解决水平布局
三、浮动的取值
1.none：不浮动
2.left：左浮动
3.right：右浮动
4.inherit：继承父级
四、语法：float：none/left/right/inherit
五、浮动的特点
1.元素脱离文档流
2.默认内容撑开宽高
3.行标签支持所有css样式
4.所有标签同排显示
六、浮动练习代码
<!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>* {margin: 0;padding: 0;}.news_list {list-style: none;height: 230px;width: 260px;background-color: #eef0f5;}.news_list .news {width: 260px;height: 36px;}.news_list .news .news1 {width: 180px;overflow: hidden;}.news_list .news p {float: left;height: 36px;line-height: 36px;font-size: 13px;}.news_list .news .hot {background-color: #ff5d00;width: 16px;height: 16px;margin-top: 10px;color: white;line-height: 16px;text-align: center;border-radius: 3px;/* margin-left: 5px; */font-size: 12px;}</style>
</head><body><ul class="news_list"><li class="news"><p style="color: #ff001a; width: 30px; text-align: center;">1</p><p class="news1" style="color: #5d595a;">上海新增本土"2573+25146"</p><p class="hot">沸</p></li><li class="news"><p style="color: #ff001a; width: 30px; text-align: center;">2</p><p class="news1" style="color: #5d595a;">上海遭遇大风暴雨 有方舱严重漏水</p></li><li class="news"><p style="color: #fba100; width: 30px; text-align: center;">3</p><p class="news1" style="color: #5d595a;">核酸检测时不建议把口罩往上推</p></li><li class="news"><p style="color: #878c9c; width: 30px; text-align: center;">4</p><p class="news1" style="color: #5d595a;">大龄旅客离开上海？铁路部门回复</p></li><li class="news"><p style="color: #878c9c; width: 30px; text-align: center;">5</p><p class="news1" style="color: #5d595a;">胡锡进： 钱文雄离世令人悲痛唏</p></li><li class="news"><p style="color: #878c9c; width: 30px; text-align: center;">6</p><p class="news1" style="color: #5d595a;">上海原副市长当志愿者？社区回复</p></li></ul></body></html><!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>浮动练习3</title><style>* {margin: 0;padding: 0;}.wrap1,.wrap2,.wrap3 {width: 424px;height: 36px;/* background-color: aqua; */}.wrap1 p,.wrap2 p,.wrap3 p {float: left;height: 18px;line-height: 18px;border-right: 2px solid #eaecee;margin-top: 9px;border-radius: 3px;}.wrap1 .logo,.wrap2 .logo,.wrap3 .logo {border: 0;margin-left: 14px;margin-right: 10px;font-weight: 700;}.wrap1 a,.wrap2 a,.wrap3 a {float: left;height: 36px;line-height: 36px;text-decoration: none;margin-right: 26px;color: #696969;font-size: 13px;}.wrap1 .fir,.wrap2 .fir,.wrap3 .fir {margin-left: 17px;}</style>
</head><body><div class="wrap1"><p class="logo">技术</p><p></p><a class="fir" href="#">Java</a><a href="#">PHP</a><a href="#">C++</a><a href="#">区块链</a><a href="#">Android</a><a href="#">iOS</a></div><div class="wrap2"><p class="logo">产品</p><p></p><a class="fir" href="#">产品总监</a><a href="#">产品经理</a><a href="#">数据产品经理</a><a href="#">游戏策划</a></div><div class="wrap3"><p class="logo">设计</p><p></p><a class="fir" href="#">UI设计师</a><a href="#">交互设计</a><a href="#">网页设计师</a><a href="#">平面设计师</a></div></body></html>效果图如下：
