css-float

时间 2019-12-05

标签 css float 栏目 CSS 繁體版

原文原文链接

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

<!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-blockcode

<!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>