视频笔记：浮动

最新推荐文章于 2022-01-24 22:59:39 发布

布吉

最新推荐文章于 2022-01-24 22:59:39 发布

阅读量215

点赞数

分类专栏： HTML CSS 文章标签： HTML

本文链接：https://blog.csdn.net/fighting_0808/article/details/83999871

版权

HTML 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

1.浮动（float：left/right/none;）的原理
(1)使块级元素在同一行显示；
(2)使行内元素（span）支持宽和高；
(3)不设宽或高时，宽和高由内容撑开；
(4)如果在该内容上加了浮动，该内容会“飘起来”，会使该内容覆盖在它的下一个内容上；元素添加了浮动之后不会占位置（脱离文档流）；文档流是文档中可显示对象在排列时所占用的位置。
（5）如果元素加了浮动：它将脱离文档流，再按照指定浮动的方向浮动，
直到碰到父级元素的边界或者前面另一个浮动的元素停止；
(6)当有其他元素浮动（浮动A）在一个没有浮动(没有浮动B)的盒子上面,
浮动A就会挤掉（或者挤出）原来在B的内容的位置；（提升层级半层）

浮动元素有字围效果；
（7）浮动是向后的，覆盖在后面没有浮动的元素上面,跟前面的元素没有关系；
/*（8）浮动的元素每次都会与上一个浮动的盒子或者父部的盒子的顶部对齐，
如果同一行已经满了，要掉下来要与上一个元素的底部对齐；*/

(9)

如果一个元素要浮动，那么它的祖先元素一定要有高度。

有高度的盒子，才能关住浮动。

2.元素的某一个方向上不能有浮动（在没有浮动的元素上添加clear,
清除其他元素在上面浮动）clear：left/right/both/none;

只能影响使用清除的元素本身，不能影响其他元素：比如·

div2向左浮动，在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。
3总结：在一个页面中，先划分好左中右三部分，在不断使用嵌套划分，使问题简单化
4当盒子的内容设置了浮动，盒子设置边框之前，要先设置盒子的宽度和高度包裹好内容；

clear只能加给块级元素或者加了浮动，支持宽和高的行内元素

父子盒子（当子盒子内容增加时，父盒子也会随子增加）

一个没有高度的父盒子是保不住浮动的子盒子的；

父盒子的高度不能由一个加了浮动的子盒子；
3.清浮动（eg:当盒子的内容大小改变时，盒子的内容随之增加，内容能撑开盒子）
eg1:当盒子的内容浮动时，盒子没有包裹内容
//html
<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="utf-8" />
       <title>a</title>
       <link rel="stylesheet" href="../css/index.css" >
   </head>
   <body id="hello">
       <div class="box">
       <div class="div"></div>
       </div>
   </body>
</html>
//CSS
.box{
   width: 300px;
   margin:0 auto;
   border: 10px solid #000;

}
.div{
   width:200px;
   height: 200px;
   background-color: red;
   float:left;
}
解决方法：1.给父级盒子也加浮动（问题：父级的父级都加浮动，并且margin左右自动失效）
          2.给父级加display:inline-block 清浮动方法：不会脱离文档流；
问题：margin左右自动失效；

          3.空标签清浮动（在内容下加一个<div>,并且设置clear：both;height:0px;IE6不支持）（内墙法）;
          4.在浮动元素下面加<br clear="all">,但不符合CSS样式标准；
*********5. (现在主流方法)给父类元素添加一个伪类after和属性zoom:1;（父级元素可以去掉宽和高）;
          after伪类修改的是添加后的内容的样式；
             但IE6,IE7不支持；但在IE6,IE7下，浮动元素的父级元素有宽度就不用清浮动
          原因：IE6,7的渲染引擎的组成部分haslayout,haslayout:根据内容大小或者父级的父级的大小重新的计算元素的宽和高
          .box:after{
      content:"";//在内容后面添加的信息
      display: block;//让它支持宽和高
      clear:both;//让它和前面的浮动元素并列
      }
   .box{
                 zoom:1;
        }
6.给父级加overflow为auto/hidden;问题：需要配合宽度或者 zoom 兼容IE6 IE7；

.overflow(当盒子指定了宽和高，内容会溢出的情况，无论是否内容是否浮动，都能判断)
overflow:auto（如果溢出加滚动条）/hidden（溢出部分剪掉）/scroll（不管是否溢出都加滚动条）；

css中一共有三种手段，使一个元素脱离标准文档流：