掌握CSS浮动：从基础开始

发表时间: 2023-09-12 10:49

浮动

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

我们在浏览网页的时候，经常会看到几个 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

掌握CSS浮动：从基础开始

浮动

清除浮动

热门阅读

推荐阅读