浮动

来源：互联网发布：北塔软件河南编辑：程序博客网时间：2024/06/02 23:01

浮动：

解决一行中显示多个盒子的问题，并且这些盒子的位置可控

float:left

float:right

标准流：浏览器默认摆放盒子的标准

浮动的特点：

浮动的元素会脱离标准流：

如果一个元素按照正常的标准来显示会在html中所属的位置占位，后面的元素会紧跟着他，但是浮动脱离了标准流，将来在看到浮动的元素之后，不能以正常的标准来进行判断

浮动以后的元素会覆盖标准流的元素之上

浮动规则：浮动找浮动，不浮动找不浮动

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>*{padding: 0;margin: 0;}.nav{width: 980px;height: 50px;background-color: gainsboro;margin: 0 auto;}.logo{width: 980px;height: 100px;background-color: paleturquoise;margin: 0 auto;}.content{width:980px;height: 500px;background-color: peachpuff;margin: 0 auto;}.mess{width: 980px;height: 500px;background-color: pink;margin: 0 auto;}.foot{width: 980px;height: 50px;background: palegreen;margin: 0 auto;}.left{width: 300px;height: 500px;background-color: crimson;float: left;}.right{width: 660px;height: 500px;background-color: orchid;float: right;}div{margin-top:3px !important;}</style></head><body><div class="nav">导航</div><div class="logo">商标</div><div class="mess">页面信息</div><div class="content"> <div class="left">左</div> <div class="right">右</div></div><div class="foot">底部</div></body></html>

阅读全文

0 0