devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

css---浮动知识点精炼汇总

作者：羊村懒王 | 2024-05-06 10:36:45

赞

踩

css---浮动知识点精炼汇总

前言

欢迎来到我的博客

个人主页:北岭敲键盘的荒漠猫-CSDN博客

浮动简单理解与介绍

这是我们普通的页面标签效果。

每个标签从上到下依次排列。

浮动顾名思义就是让这个标签飞翔起来。

他飞起来后，后面的标签来到他的位置上。

而浮动的标签就会显示在标签的上面。

如果多个相邻的标签一起浮动。那么这些浮动的标签就会在一行上排列。

浮动的作用

1.横向排列块型盒子

我们的块标签都是纵向排列的，即使设置了长宽后他们依然是纵向排列。

  1.     <style>
  2.         .class {
  3.             height: 80px;
  4.             width: 100px;
  5.         }
  6.     </style>
  7. </head>
  8.  
  9. <body>
  10.     <div style="background-color: blueviolet;" class="class">1</div>
  11.     <div style="background-color: brown;" class="class">2</div>
  12.     <div style="background-color: chartreuse;" class="class">3</div>
  13. </body>

我们可以利用浮动来让他们横向排列。

2.制作左右框效果

利用浮动可以很方便的把框给左右两边分布。

3.制作随父标签变化的页面

正常情况下，我们的窗口是不会随页面改变的，浮动可以保证浮动内容显示出来。

浮动的语法

语法: float: 属性值;

属性值:

属性作用
none不浮动(默认)
left左浮动
right右浮动

效果跟上面一样，不演示了。

浮动的特性

添加浮动之后，标签的特性就会改变。

脱标

标准流:就是我们标签默认自己的特性，纵向排列。

直观理解:

其实就是添加浮动后，他就不是他原先的标签了。恕瑞玛飞升了，他原先的位置空出来了，给后面的人了。

直观的看效果吧：

  1.     <style>
  2.         .class {
  3.             height: 200px;
  4.             width: 300px;
  5.         }
  6.     </style>
  7. </head>
  8.  
  9. <body>
  10.     <div style="background-color: blueviolet;" class="class">1</div>
  11.     <div style="background-color: brown; height: 100px; width: 200px; float: left;">2</div>
  12.     <div style="background-color: chartreuse;" class="class">3</div>
  13. </body>

后面的人继承他的位置。

水平顶端对齐

  1.     <style>
  2.         .class {
  3.             height: 200px;
  4.             width: 300px;
  5.             float: left;
  6.         }
  7.     </style>
  8. </head>
  9.  
  10. <body>
  11.     <div style="background-color: blueviolet;" class="class">1</div>
  12.     <div style="background-color: brown; height: 100px; width: 200px; float: left;">2</div>
  13.     <div style="background-color: chartreuse;" class="class">3</div>
  14. </body>

制作苦茶子的形状：

 根据父标签自动变化

我们做的这个苦茶子会根据父标签(整个窗口)的变化而变化。

 行内块特性

不管你浮动之前是什么类型的标签，浮动之后统一都是行内块标签。

浮动在页面布局中的应用

我们先来分析一下浮动对于布局的优势劣势

优势:

1.可以便捷的进行平行排列。

2.可以进行左右侧控制

3.内容会根据父盒子的状态自主改变。

劣势:

1.默认是在一行中排列。并不能垂直排列。

针对他的优劣势我们想要布局的话，似乎需要解决这个一行排列的问题。

那么我们知道标准流是垂直排列的。

也就是说，我们可以利用垂直排列的特性，来创造盒子，用盒子来进行垂直布局，然后用浮动标签进行盒子内部的布局。

案例演示:

  1.     <style>
  2.         .mid {
  3.             height: 100px;
  4.             width: 400px;
  5.             margin: 0 auto;
  6.             margin-top: 2px;
  7.             margin-bottom: 2px;
  8.             background-color: palegoldenrod;
  9.         }
  10.  
  11.         .flat {
  12.             float: right;
  13.             width: 20px;
  14.             height: 20px;
  15.             background-color: black;
  16.             margin: 5px 5px;
  17.         }
  18.     </style>
  19. </head>
  20.  
  21. <body>
  22.     <div style="height: 30px; background-color: palegoldenrod;">
  23.         <div style="float: left;" class="flat"></div>
  24.         <div class="flat"></div>
  25.         <div class="flat"></div>
  26.     </div>
  27.     <div class="mid"></div>
  28.     <div class="mid"></div>
  29.     <div class="mid"></div>
  30.     <div style="height: 50px; background-color: palegoldenrod;"></div>
  31. </body>

清除浮动

清除浮动的情景：

我们会遇到类似于商品架这样的需求，我们的盒子不会给定高度，而是随着商品的增加而增高。

但是我们明白，浮动的脱标特性会让这个盒子中没有标准流元素，也就是说这个盒子会变成高度为0的情况。

看以下场景：

我先把浮动注释起来

  1.     <style>
  2.         .flat {
  3.             /* float: right; */
  4.             width: 60px;
  5.             height: 80px;
  6.             background-color: black;
  7.             margin: 5px 5px;
  8.         }
  9.     </style>
  10. </head>
  11.  
  12. <body>
  13.     <div style="background-color: palegoldenrod;">
  14.         <div class="flat"></div>
  15.         <div class="flat"></div>
  16.         <div class="flat"></div>
  17.     </div>
  18. </body>

我没有设置高度，盒子随着子元素变大而变大。

下面把注释去掉

盒子没了

消除浮动就是针对这种情况产生。

清除浮动的方法

添加额外的块级标签

清除方法:在浮动标签的最后再添加一个标签，这个标签添加清除浮动

clear: both;

缺点：每个需要清除浮动的位置都需要添加这个表情，导致结构比较复杂。

效果：

  1.     <div style="background-color: palegoldenrod;">
  2.         <div class="flat"></div>
  3.         <div class="flat"></div>
  4.         <div class="flat"></div>
  5.         <div style="clear: both;"></div>
  6.     </div>

父元素添加overflow属性

给父元素设置一个overflow属性，属性值使用hidden。

优点:相比于添加额外标签，这个方法很简洁。

缺点:这个属性是隐藏溢出部分的意思，有的盒子一半在外面就会显示异常。

效果

  1.     <div style="background-color: palegoldenrod; overflow: hidden;">
  2.         <div class="flat"></div>
  3.         <div class="flat"></div>
  4.         <div class="flat"></div>
  5.     </div>

 父元素添加伪元素

给父元素添加下面属性

  1. .clearfix::after {
  2.   content: "";
  3.   display: table;
  4.   clear: both;
  5. }

原理跟额外标签差不多

  1.     <style>
  2.         .flat {
  3.             float: left;
  4.             width: 60px;
  5.             height: 80px;
  6.             background-color: black;
  7.             margin: 5px 5px;
  8.         }
  9.  
  10.         .clearfix::after {
  11.             content: "";
  12.             display: table;
  13.             clear: both;
  14.         }
  15.     </style>
  16. </head>
  17.  
  18. <body>
  19.     <div style="background-color: palegoldenrod;" class="clearfix">
  20.         <div class="flat"></div>
  21.         <div class="flat"></div>
  22.         <div class="flat"></div>
  23.     </div>
  24. </body>

效果

双伪元素清除浮动

添加这串代码（*zoom有时候会显示异常，看情况加，加上兼容性好）

  1. .clearfix:after {
  2.   content: "";
  3.   display: table;
  4. }
  5.  
  6. .clearfix:after {
  7.   clear: both;
  8. }
  9.  
  10. /* 确保IE6-7也能清除浮动 */
  11. .clearfix {
  12.   *zoom: 1;
  13. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/543779
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号