当前位置：网站首页>浮动的特点

浮动的特点

2022-08-09 15:04:00 【恁180】

浮动的特点：

1.当浮动元素遇到了文字，浮动的元素不会覆盖文字，而是文字会环绕在浮动元素的周围

      从而实现文字环绕图片的效果

      这也是浮动最早的功能，只是后面用于水平布局

例如：下列代码段

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      #box{
        width: 400px;
        height: 400px;
        border: 1px solid red;
      }
      .box1{
        width: 100px;
        height: 100px;
        background-color: green;
        float: left;
      }
    </style>  
  </head>
  <body>
    <div id="box">
      <div class="box1"></div>
      <p class="p1">
        者活有间韩斗谓先今德恶，舟九和，子郭章国极的非花郭不，否宫的娘生第白廿对其头羊，为即甲总保你心能和觉程上胜临韩，变感清应说人为，十尤陛救千烦才秦然两九不事应太苦败答，此洪道胜怒，洪谓五以斯作秦，花败纯破不足，弟我久锐到使姑己不死有到感有考中措时，的是只接。
        韩样统感牙范币否自了，骨讨到灰面，爱卑易，帝此娘沾全他死，帝日满与留罪，衣惜到太落千不撒，么活上己韩一一人者官准只尘特，准同王尽统航王仃活无，能快死生天洋磊，专处耳非的诗得五安谋兮里制联交，同领之会变最杀的逃别他我她才，判兼哥也当商法说身司弟搏切皮六瞠骨。
      </p>
    </div>
  </body>
</html>

运行结果如图所示：

 

如图所示，浮动的盒子并没有覆盖掉文字，而是文字围绕在盒子周围

 2. 元素在文档流当中

      块元素  ： 独占一行

      行内元素 ： 不会独占一行，不能自定义设置宽高

      行内块元素 ：兼具块元素，行内元素的特点

      元素脱离文档流了，就不再区分块，行内，行内块，也就不具有以上的特点

        元素也不会独占一行了，也可以设置宽高了等等

例如下列代码段

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .s1 {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
      .box2 {
        width: 100px;
        height: 150px;
        background-color: green;
      }
    </style>

  </head>
  <body>
    <div class="box1">我是box1</div>
    <span class="s1">我是s1</span>
    <span class="s1">我是s2</span>
    <div class="box2">我是box2</div>
  </body>
</html>

效果如图所示：

 

可以看到span元素的高和宽并没有设置成功

那我们把span元素设置一个左浮动看看吧

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .s1 {
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;
      }
      .box2 {
        width: 100px;
        height: 150px;
        background-color: green;
      }
    </style>

  </head>
  <body>
    <div class="box1">我是box1</div>
    <span class="s1">我是s1</span>
    <span class="s1">我是s2</span>
    <div class="box2">我是box2</div>
  </body>
</html>

如图所示

 

这样就设置成功了 覆盖了box2 

 

 

 

原网站

版权声明
本文为[恁180]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_65607135/article/details/126246683

边栏推荐

猜你喜欢

随机推荐