浮动

2024-04-06 18:34:32

浮动

块级元素：独占一行

h1~h6 p div 列表......

行内元素：不独占一行

span a img strong......

行内元素可以被包含在块级元素中，反之不行

display

这个也是一种实现行内元素排列的方式，但是很多情况下都是用float

<style>
    <!--
    block   块元素
    inline  行内元素
    inline-block    是块元素，但是可以内联，在一行
    none    隐藏
    块元素可以转换成行内元素，相反亦可以。
    -->
    div{
        width: 200px;
        height: 200px;
        border: 2px solid red;
    }
    span{
        width: 200px;
        height: 200px;
        border: 2px solid red;
        display: block;
    }
</style>

<body>
<div>div块级元素</div>
<span>span行内元素</span>
</body>

float

左右浮动 float

<style>
  div{
      margin: 10px;
      padding: 5px;
  }
  #father{
      border: 1px #000 solid;
  }
  .layer01{
      border: 1px #F00 dashed;
      display:  inline-block;
      float: right;
  }
  .layer02{
      border: 1px #00F dashed;
      display: inline-block;
      float: right;
  }
  .layer03{
      border: 1px #060 dashed;/*dashed：虚线*/
      display: inline-block;
      float: right;
  }
  .layer04{
      border: 1px #666 dashed;
      font-size: 12px;
      line-height: 30px;
      display: inline-block;
      float: right;
  }
  </style>

<body>
    <div id="father">
        <div class="layer01"><img src="1.jpg" alt=""></div>
        <div class="layer02"><img src="2.jpg" alt=""></div>
        <div class="layer03"><img src="3.jpg" alt=""></div>
        <div>
            浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动的盒子为止。
        </div>
    </div>
</body>

父级边框塌陷的问题

clear

/*
clear: right;右侧不允许右浮动元素
clear: left;左侧不允许右浮动元素
clear: both;两侧不允许右浮动元素
clear: none;
*/

<style>
  div{
      margin: 10px;
      padding: 5px;
  }
  #father{
      border: 1px #000 solid;
  }
  .layer01{
      border: 1px #F00 dashed;
      display:  inline-block;
      float: right;
  }
  .layer02{
      border: 1px #00F dashed;
      display: inline-block;
      float: right;
  }
  .layer03{
      border: 1px #060 dashed;/*dashed：虚线*/
      display: inline-block;
      float: right;
  }
  .layer04{
      border: 1px #666 dashed;
      font-size: 12px;
      line-height: 30px;
      display: inline-block;
      float: right;
      clear: both;
  }
  .clear{
      clear: both;
      margin: 0;
      padding: 0;
  }
</style>

<body>
    <div id="father">
        <div class="layer01"><img src="1.jpg" alt=""></div>
        <div class="layer02"><img src="2.jpg" alt=""></div>
        <div class="layer03"><img src="3.jpg" alt=""></div>
        <div>
            浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动的盒子为止。
        </div>
        <!-- <div class="clear">方法二，加一个空的div</div> -->
    </div>
</body>

解决方案

增加父级元素的高度

#father{
    border: 1px #000 solid;
    height: 800px;
}

添加一个空的div标签，清除浮动

<div class="clear"></div>
.clear{
  clear: both;
  margin: 0;
  padding: 0;
}

overflow

在父级元素中增加一个overflow：hidden;

父类添加一个伪类：after

#father:after{
  content: '';
  display: block;
  clear: both;
}

小结：

浮动元素后面增加空div
简单，代码中尽量避免空div
设置父级元素的高度
简单，元素假设有了固定的高度，就会被限制
overflow
简单，下拉的一些场景避免使用
父类添加一个伪类：after（推荐）
写法稍微复杂一点，但是没有副作用，推荐使用

对比

display
方向不可控制
float
浮动起来的话会脱离标准文档流，所有要解决父级边框塌陷的问题。

定位

1. 相对定位：position: relative;
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留

top: -20px;
left: 20px;
bottom: 10px;
right: 20px;

<!-- 相对定位：相对于自己原来的位置进行偏移。-->
<style>
  div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
  }
  #father{
      border: 1px solid #666;
      padding: 0;
  }
  #first{
      border: 1px solid #e58b8b;
      background-color: #a13b30;
      position: relative;/*相对定位：上下左右*/
      top: -20px;
      left: 20px;

  }
  #second{
      border: 1px solid #589548;
      background-color: #585548;
  }
  #third{
      border: 1px solid #2c507d;
      background-color: #2c017d;
      position: relative;
      bottom: 10px;
      right: 20px;
  }
</style>

<body>
<div ID="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>

2. 绝对定位
定位：基于XXX定位，上下左右。
相对于父级或浏览器的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置不会被保留

没有父级元素定位的前提下，相对于浏览器定位。（设置成position: absolute;）

<style>
  #father{
    border: 1px solid #666;
    padding: 0;
  }
  #second{
    border: 1px solid #589548;
    background-color: #585548;
    position: absolute;
    right: 40px;
  }    
</style>

假设父级元素存在定位，我们通常会相对于父级元素偏移。

<style>
  #father{
    border: 1px solid #666;
    padding: 0;
    position: relative;
  }
  #second{
    border: 1px solid #589548;
    background-color: #585548;
    position: absolute;
    right: 40px;
  }    
</style>

在父级元素范围内移动。

3. 固定定位fixed

<style>
  body{
  height: 1000px;
  }
  div:nth-of-type(1){/*绝对定位：相对于浏览器*/
  width: 150px;
  height: 150px;
  background: red;
  position: absolute;
  right: 0;
  bottom: 0;
  }
  div:nth-of-type(2){/*fixed：固定定位*/
  width: 100px;
  height: 100px;
  background: #ee7416;
  position: fixed;
  right: 0;
  bottom: 0;
}
</style>

<body>
<div>测试1</div>
<div>测试2</div>
</body>

4. 图层z-index

z-index：默认是0，最高无限 ~999
opacity: 0.5; 背景透明度

<style>
  #content{
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    text-align: center;
    border: 1px solid #000;
    line-height: 25px;
    width: 180px;
    height: 200px;
  }
  ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  img{
    border-radius: 20px;
  }
  /*父级元素相对定位*/
  ul{
    position: relative;
  }
  .tipText,.tipBg{
    position: absolute;
    width: 180px;
    border: 1px solid red;
    top: 100px;
    color: #f6f3f3;
  }
  .tipBg{
    background: #00040e;
    height: 25px;
    opacity: 0.5;/*背景透明度*/
    /*filter: alpha(opacity=50);背景透明度*/
  }
  .tipText{
    z-index: 9;
  }
</style>

<body>
<div id="content">
    <ul>
        <li><img src="img/asdc.png" alt=""></li>
        <li class="tipText">努力学Java</li>
        <li class="tipBg"></li>
        <li>时间：2100:01:01</li>
        <li>地点：月球</li>
    </ul>
</div>
</body>

码农公寓

浮动

display

float

父级边框塌陷的问题

对比

定位

相关文章