首页 > 其他分享> 文章详细

浮动（float）

2021-01-20 18:02:22 阅读：170 来源： 互联网

标签：浮动 after 盒子清除 clear float 元素

浮动（float）内容概览：

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

浮动（float）

普通流（标准流）（normal flow）

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

浮动（float）

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

float：属性值；

浮动详细内幕特性：

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

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

注意：

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

布局流程

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

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

清除浮动

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

clear：属性值；

额外标签法

是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;
}

示例

<!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

页面效果如下

标签：浮动,after,盒子,清除,clear,float,元素
来源： https://www.cnblogs.com/Chestnut-g/p/14304231.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

浮动（float）