浮动(float)

浮动(float)内容概览:

  • 普通流
  • 浮动
  • 浮动详细内幕特性
  • 布局流程
  • 清除浮动
    • 额外标签法
    • 父级添加 overflow 属性方法
    • 使用 after 伪元素 清除浮动
    • 使用 before 和 after 双伪元素 清除浮动

 

浮动(float)

普通流(标准流)(normal flow)

  • 网页布局的核心,其实就是用CSS来摆放盒子位置。那么如何将盒子摆放到合适的位置?
  • CSS的定位机制有3种,普通流(标准流)、浮动 和 定位
  • 标准流:HTML语言中另一个相当重要的概念;或者可以称为 普通流,或者 文档流。
  • 标准流 实际上就是一个网页内标签元素 按照从上而下、从左至右 的排列顺序;其实就是块元素、行内元素的一些基本排列

 

浮动(float)

  • 浮动最早是用来做 文字环绕效果的;
  • 后来发现 浮动可以使三个 div 排列在一行,便用来做 网页布局了;
  • 定义:元素的浮动 是指设置了浮动属性的元素会 脱离标准普通流的控制,移动到其父元素指定的位置的过程。在CSS中用 float 来定义浮动;
  • 浮动的目的:就是为了让多个块级元素在同一行上显示;
  • 语法格式如下:
float:属性值;

浮动(float)

 

 

 浮动详细内幕特性:

脱离标准流,不占位置,会出现盒子叠加效果,只有左右浮动。所以为了不影响标准流,会先创建一个父级元素,然后在再其内创建孩子盒子的浮动;

浮动首先创建 包含块 的概念(包裹)。
就是说,浮动的元素总是找离它最近的父级元素对齐,但不会超过内边距的范畴。

浮动(float)

 

 

注意:

  • 要想使父级元素中的所有盒子都浮动在一行,那么每一个盒子都需要添加 float 属性,否则不能使其排列在一行。
  • 元素 添加 浮动 后,会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认内容的多少

布局流程

为了提高网页制作的效率,布局时通常需要遵守一定的布局流程,具体如下:

  • 确定页面的版心(可视区)
  • 分析页面中的行模块,以及每个行模块中的列模块(先行后列)
  • 制作HTML结构
  • CSS初始化(利用通配符选择器 *{} ,清除body默认的内外边距),然后运用盒子模型的原理,通过div+CSS布局来控制网页的各个模块。

清除浮动

  • 当父级元素没有定义高度,而子元素都浮动的时候,会造成上下盒子重叠,此时便需要清除浮动。
  • 清除浮动 本质叫做 闭合浮动;清除浮动就是 把浮动的盒子圈起来,让父盒子闭合出口和入口,不让他们出来影响其他元素。
  • 在CSS中,clear 属性用于清除浮动,基本语法格式如下:
clear:属性值;

浮动(float)

 

 

 额外标签法

是W3C推荐的做法;通过在浮动元素末尾添加一个空的标签,例如

<div style="clear: both;"></div>
或者其他标签 <br /> 等亦可

 

父级添加 overflow 属性方法

可以通过触发 BFC 的方式,可以实现清除浮动效果。

给父级元素添加:overflow:hidden | auto | scroll  都可以实现。

缺点:内容增多时容易造成 不会自动换行 导致内容被隐藏掉,无法显示需要溢出的元素。

 

使用 ::after 伪元素 清除浮动

/* 清除浮动3 ::after*/
选择器::after {
/* content 尽量不要为空,否则旧版本的浏览器会有空袭,一般用一个 . 代替 */
  content: ".";
  /* 转为块级元素 */
  display: block;
  height: 0;
  /* 隐藏盒子 */
  visibility: hidden;
  /* 清除浮动 */
  clear: both;
}
选择器 {
  /*带有 * 的属性,只有IE6-7能识别的特殊符号*/
  *zoom:1;
}

缺点:由于IE6-7不支持::after,使用zoom:1触发hasLayout。

 

使用 ::before 和 ::after 双伪元素 清除浮动(最好使用此法)

/* 清除浮动4: ::before ::after */
选择器::before,选择器::after {
     content: "";
     display: table;
}
选择器::after {
     clear: both;
}
选择器 {
     *zoom: 1;
}

 

示例

 

浮动(float)
<!DOCTYPE html>
<html lang="en">
     <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
               .left, .right{
                    width: 200px;
                    height: 100px;
                    float: left;
                    margin-right: 10px;
                    background-color: salmon;
               }
               .other {
                    width: 400px;
                    height: 200px;
                    background-color: sandybrown;
               }
               /* 清除浮动2:overflow */
               /* .father-clear{
                    overflow: hidden;
               } */

               /* 清除浮动3 ::after*/
               /* .father-clear::after{ */
                    /* content 尽量不要为空,否则旧版本的浏览器会有空袭,一般用一个 . 代替 */
                    /* content: "."; */
                    /* 转为块级元素 */
                    /* display: block;
                    height: 0; */
                    /* 隐藏盒子 */
                    /* visibility: hidden;
                    clear: both;
               } */

               /* 清除浮动4: ::before ::after */
               .father-clear::before,.father-clear::after{
                    content: "";
                    display: table;
               }
               .father-clear::after{
                    clear: both;
               }
               .father-clear{
                    *zoom: 1;
               }

               .left-clear, .right-clear {
                    width: 200px;
                    height: 100px;
                    float: left;
                    margin-right: 10px;
                    background-color: salmon;
               }
               .other-clear {
                    width: 400px;
                    height: 200px;
                    background-color: sandybrown;
               }
               
          </style>
     </head>
     <body>
          <!-- 未清除浮动,造成重叠 -->
          <div class="father">
               <div class="left">未清除浮动,造成重叠</div>
               <div class="right">未清除浮动,造成重叠</div>
          </div>
          <div class="other">未清除浮动,造成重叠</div>

          <br/>

          <div class="father-clear">
               <div class="left-clear">清除浮动1:在浮动盒子的后面添加一个空盒子 </div>
               <div class="right-clear">清除浮动2:overflow:hidden | auto | scroll</div>
               <!-- 清除浮动1:在浮动盒子的后面添加一个空盒子 -->
               <!-- <div style="clear: both;"></div> -->
          </div>
          <div class="other-clear">清除浮动3 ::after &nbsp;&nbsp;&nbsp; 清除浮动4 ::before ::after</div>
     </body>
</html>
View Code

 

 

 

 

页面效果如下

浮动(float)

 

 

上一篇:浮动


下一篇:Luogu P5304 [GXOI/GZOI2019]旅行者