专业编程基础技术教程

网站首页 > 基础教程 正文

CSS基础-浮动 css 浮动

ccvgpt 2024-11-09 11:27:34 基础教程 6 ℃


浮动

浮动是为了元素标签的并排显示问题。

CSS基础-浮动 css 浮动

我们在浏览网页的时候，经常会看到 几个 div 块是可以并排显示的， 浮动就是解决这样问题的方法之一。

float属性有以下的值

  • float: left; 左浮动
  • float: right 右浮动

浮动的特点

  • 浮动主要针对的是并排显示的盒子而言。
  • 在一个父容器的盒子里， 兄弟元素之间要浮动必须都浮动。
  • 父容器必须要有一个足够的宽度，否则不足以使得各个子元素之间并排展示。
  • 一个父容器的盒子内，兄弟元素会按照顺序贴靠，如果是左浮动，就往左贴合；如果是右浮动，就往右贴合。如果发现贴合的盒子后没有足够的空间，则会在寻找前一个兄弟元素进行贴靠。直到空间合适为止。
  • 浮动的元素已经脱离了标准的HTML文档流，不再区分块级元素、行内元素并且一律能设置宽度和高度，即使它是span标签或者a标签


一个浮动的例子

<!--一个浮动的例子-->
<style>


    .box1 {
        width: 600px;
        height: 200px;
        border: 1px solid #000;
    }


    .box1 .con1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
    }


    .box1 .con2 {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }


    .box1 .con3 {
        width: 201px;
        height: 200px;
        background-color: yellowgreen;
        float: left;
    }
</style>
<div class="box1">
        <div class="con1"></div>
        <div class="con2"></div>
        <div class="con3"></div>
</div>


一个顺序贴靠的例子

<!--  一个顺序贴靠的例 子-->
<!-- 以下代码中 兄弟元素 con1， con2， con3 之间会进行顺序贴靠-->
<!-- con3 在贴靠 con2 的时候，发现父容器的宽度只能是400px, 分别被con1 和 con2 占据， 所以con3 会找 cont1 贴靠，最终con3 位于 con1右边， con2下边 -->


<style>


  .box1 {
      width: 400px;
      height: 200px;
      border: 1px solid #000;
  }


  .box1 .con1 {
      width: 200px;
      height: 200px;
      background-color: orange;
      float: left;
  }


  .box1 .con2 {
      width: 200px;
      height: 100px;
      background-color: blue;
      float: left;
  }


  .box1 .con3 {
      width: 200px;
      height: 100px;
      background-color: yellowgreen;
      float: left;
  }
</style>
<div class="box1">
  <div class="con1"></div>
  <div class="con2"></div>
  <div class="con3"></div>
</div>


清除浮动

清除浮动是为了 不影响设置浮动标签的后续的标签的布局展示。

因为，在一个父容器中，子元素浮动了，脱离了标准文档流，不在占用之前的位置，会导致 无法撑开没有设置高度的父元素；从而导致后续的结构挤压，造成整个页面布局的混乱。

  • 给父元素加个高度。在那些明确知道父容器高度的情况下，可以使用。
<style>
  * {
    margin: 0;
    padding: 0;
  }


  div {
    height: 100px;
  }
  p {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: red;
  }
</style>


<body>
  <div>
    <p></p>
    <p></p>
  </div>


  <div>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
  • 后续元素增加 clear:both ,清除前面元素对自己的影响。
<style>
    * {
        margin: 0;
        padding: 0;
    }


    .box2 {
        margin-top: 20px;
        clear: both;
    }
    p {
        float: left;
        width: 100px;
        height: 100px;
        margin-right: 20px;
        background-color: red;
    }
</style>


<body>
<div>
    <p></p>
    <p></p>
</div>


<div class="box2">
    <p></p>
    <p></p>
    <p></p>
</div>
</body>
  • 浮动的父容器添加后续伪元素，clear:both ，清除浮动对后续元素的影响(推荐方式)。
<style>
  * {
      margin: 0;
      padding: 0;
  }


  .cleafix::after {
      content: '';
      clear: both;
      display: block
  }


  p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 20px;
      background-color: red;
  }
</style>


<body>


<div class="cleafix">
  <p></p>
  <p></p>
</div>


<div class="cleafix">
  <p></p>
  <p></p>
  <p></p>
</div>
</body>
  • 额外的空标签，在浮动元素的父盒子之后添加一个空标签，空标签上添加 clear:both 属性。
<style>
* {
  margin: 0;
  padding: 0;
}


.clearboth {
  clear: both;
}


p {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  background-color: red;
}
</style>


<body>
<div>
<p></p>
<p></p>
</div>


<div class="clearboth"></div>


<div>
<p></p>
<p></p>
<p></p>
</div>
</body>
  • 浮动元素的父容器添加 overflow:hidden , 使得子元素的浮动只能作用在父容器内。
<style>
* {
  margin: 0;
  padding: 0;
}
div {
  overflow: hidden;
  margin: 20px;
}
p {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  background-color: red;
}
</style>


<body>
  <!--
      两个div
      第一个div中的元素在内部浮动 
      第二个元素中的div在内部浮动
      但是两个父盒子之前不要互相影响
  -->
  <div>
    <p></p>
    <p></p>
  </div>


  <div>
    <p></p>
    <p></p>
    <p></p>
  </div>
</bo

Tags：

猜你喜欢

最近发表
标签列表