css-float

weixin_33753003

于 2019-02-27 15:28:50 发布

阅读量51

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000018315599

定义选择往那个方向浮动、以往这个属性总用于图像(也适用于其他元素)，使文本环绕在图像周围（一半）,并且脱离了正常的文档流，如果后面还有元素，该元素会被浮动元素覆盖，加上这个属性相当于display: inline-block
环绕特性

<!DOCTYPE html>
<html lang="en">
<head>
<style>
 .p > div {
   float: left;
   margin: 0;
   font-size: 30px;
 }
 .p {
   border: 1px solid red;
   max-width: 30ex;
 }
</style>
</head>
<body >
  <div class='p'>
    <div>2222</div>
    11111111111111111111
    111111111111111
    1
  </div>
</body>
</html>

脱离正常的文档流&display: inline-block

<!DOCTYPE html>
<html lang="en">
<head>
<style>
 div:nth-child(even) {
   border: 1px solid red;
   float: left;
   width: 100px;
   height: 20px;
 }
 div:nth-child(odd) {
   border: 2px solid yellow;
   width: 200px;
   height: 20px;
 }
</style>
</head>
<body >
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</body>
</html>