css 清除浮动方案

清除浮动的三种方案

  • 1. 第一种方案(overflow: hidden)
  • 2. 第二种方案(clear:both)
  • 3. 第三种方案(为元素)

1. 第一种方案(overflow: hidden)

  <style>
    .container {
      background-color: bisque;
      /* 清除方案 */
      overflow: hidden;
    }

    .inner {
      width: 50px;
      height: 50px;
      background-color: cadetblue;
      float: left;
    }
  style>
head>
<body>
  <div class="container">
    <div class="inner">div>
  div>
body>

2. 第二种方案(clear:both)

  <style>
    .container {
      background-color: bisque;
    }

    .inner {
      width: 50px;
      height: 50px;
      background-color: cadetblue;
      float: left;
    }
    // 清除方案
    .side {
      clear: both;
    }
  style>
head>
<body>
  <div class="container">
    <div class="inner">div>
    <div class="side">div>
  div>
body>

3. 第三种方案(为元素)

  <style>
    .container {
      background-color: bisque;
    }
    // 清除方案
    .container::after {
      content: "";
      display: table;
      clear: both;
    }

    .inner {
      width: 50px;
      height: 50px;
      background-color: cadetblue;
      float: left;
    }
  style>
head>
<body>
  <div class="container">
    <div class="inner">div>
  div>
body>

示例:
css 清除浮动方案_第1张图片

你可能感兴趣的:(css,前端,javascript)