琼殿技术论坛»首页 › 前端开发技术交流 › HTML论坛 › HTML5中块级元素float浮动总结
返回列表 发新帖
查看: 83|回复: 0

HTML5中块级元素float浮动总结

[复制链接]
三亚通

3

主题

0

回帖

0

积分

热心网友

金币
0
阅读权限
220
精华
0
威望
0
贡献
0
在线时间
0 小时
注册时间
2008-10-10
发表于 2020-9-7 17:31:00 | 显示全部楼层 |阅读模式

 1.float属性

在CSS中，任何元素都可以浮动，无论是块级元素还是行内元素，设置浮动后可以设置宽高（width,height）。

值描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

 HTML5中的块级元素默认要独占一行，无论当前块元素的宽度是多少。

2.简单示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float用法</title>
    <style>
        #container {
            border: 1px solid rgb(163, 163, 163);
            background-color: #ddd;
            width: 800px;
         }

        #block1 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
            width: 200px;
            height: 150px;
          
        }

        #block2 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(145, 233, 142);
            width: 300px;
            height: 180px;
           
        }

        #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
            width: 260px;
            height: 120px;
          
        }

        
    </style>
</head>

<body>
    <div id="container">
        <div id="block1">block1</div>
        <div id="block2">block2</div>
      
    </div>
    <div id="block3">block3</div>
</body>

</html>

 

效果图

 

 

 

 （1）container块没有设置高度

（2）block1块和block2放置于container块中，block3块置于container块之外。

 2.1设置第一个块block1浮动

 #block1
        {
            border:1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
            width: 200px;
            height: 150px;
            /* 浮动到左边 */
            float: left;
        }

效果图：

 block1块脱离文档流浮动到父容器container的左上角，block2块和block3块默认向上移动到原来block1位置，显示出来的效果就是block1盖住了block2。大概是下图这个意思吧。

 

 

  2.2设置block1浮动到左边，block2浮动到右边

        #block1 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
            width: 200px;
            height: 150px;
            /* 浮动到左边 */
            float: left;
        }

        #block2 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(145, 233, 142);
            width: 300px;
            height: 180px;
            /* 浮动到右边 */
            float: right;
        }

效果图

 

 

 

 

block1块和block2块都浮动起来了，两个块的高度都比block3高，所以block3顶到文档的最上面，被block1块和block2块盖住。

 

 2.3清除浮动(clear)

clear 属性规定元素的哪一侧不允许其他浮动元素。

值描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

 

 clear清除浮动的原理（转自：https://blog.csdn.net/weixin_41796631/article/details/89425006）

（1）设置了 clear 的元素只能通过调整自身来使自己不要和浮动元素排列在一起。

（2）比如说，如果一个元素同时设置了 float:left 和 clear:left，希望左边不要有浮动元素，那么这个元素就要调整自己，排到下一行去。因为设置了 float: left，这个元素会往左边靠拢，所以这个元素会跑到下一行，同时往左浮动。

（3）如果设置了clear: right，也无法清除右边的元素。因为元素只能调整自身，不能移动别的元素。所以右边即使有浮动元素，也无法清除。

w3.org官方的解释是：「元素盒子的边不能和前面的浮动元素相邻」。我理解这句话其实就是调到前面元素的下一行，让左右两边不与前面的元素相邻。

 

2.4清除浮动的4种方法

（1）设置block3块的clear属性

  #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
            width: 260px;
            height: 120px;
            /* 清除左边浮动 */
            clear:left;
        }

效果图：

 

 

 

  #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
            width: 260px;
            height: 120px;
            /* 清除右边浮动 */
            clear:right;
        }

效果图：

（2）在block2块后面添加一个空div，这个空 div 的样式添加 clear：both。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float用法</title>
    <style>
        #container {
            border: 1px solid rgb(163, 163, 163);
            background-color: #ddd;
            width: 800px;
         }

        #block1 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
            width: 200px;
            height: 150px;
            /* 浮动到左边 */
            float: left;
        }

        #block2 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(145, 233, 142);
            width: 300px;
            height: 180px;
            /* 浮动到右边 */
            float: right;
        }

        #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
            width: 260px;
            height: 120px;
          
        }
        
        .clearfix{
            clear: both;
        }
        
    </style>
</head>

<body>
    <div id="container">
        <div id="block1">block1</div>
        <div id="block2">block2</div>
        <div class="clearfix"></div>
    </div>
    
    <div id="block3">block3</div>
</body>

</html>

效果图：

 

 样式名为clearfix的块写在了container块里面，当清除浮动时，父元素container的高度被撑起来了，其兄弟元素block3的渲染也不再受到浮动的影响。因为此时clearfix块还在文档流内，所以父元素只能自动增加高度，其背景颜色就显示出来了。

如果将clearfix的块写在了container块外面，则父元素container的高度不能被撑起来，如下图所示：

（3）为父元素添加overflow属性

overflow属性

值描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。 
 #container {
            border: 1px solid rgb(163, 163, 163);
            background-color: #ddd;
            width: 800px;
            /* 父元素加上overflow属性 */
            overflow: auto;
         }

效果如下图，此时已经默认清除了浮动。

 

 （以下内容转自：https://blog.csdn.net/h_qingyi/article/details/81269667）

（4）使用 after 伪元素清除浮动（推荐使用）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float用法</title>
    <style>
        #container {
            border: 1px solid rgb(163, 163, 163);
            background-color: #ddd;
            width: 800px;
         }

        #block1 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
            width: 200px;
            height: 150px;
            /* 浮动到左边 */
            float: left;
        }

        #block2 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(145, 233, 142);
            width: 300px;
            height: 180px;
            /* 浮动到右边 */
            float: right;
        }

        #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
            width: 260px;
            height: 120px;
          
        }
        
        .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
       .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
       }

        
    </style>
</head>

<body>
    <div id="container" class="clearfix">
        <div id="block1">block1</div>
        <div id="block2">block2</div>
    </div>

    <div id="block3">block3</div>
</body>

</html>
View Code

起作用的代码如下：

 .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
       .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
       }

效果图：

（5）使用before和after双伪元素清除浮动（推荐使用）

 .clearfix:after,
        .clearfix:before {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

效果与上面相同。

（6）给浮动元素父级设置高度

 （7）设置父元素同时浮动

（8）父元素设置成inline-block

（9）br 标签清除浮动

参考文章：

https://www.w3school.com.cn/cssref/pr_class_float.asp

https://blog.csdn.net/nanjinzhu/article/details/82716522

https://blog.csdn.net/weixin_34062469/article/details/91721757

https://blog.csdn.net/linysuccess/article/details/53432568

https://blog.csdn.net/qq_42039588/article/details/100982293

https://blog.csdn.net/sunny1996/article/details/68959176

https://blog.csdn.net/weixin_41796631/article/details/89425006

https://blog.csdn.net/weixin_43990215/article/details/95166061?utm_medium=distribute.pc_relevant.none-task-blog-title-1&spm=1001.2101.3001.4242

https://blog.csdn.net/weixin_34072857/article/details/91372246?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param

https://www.cnblogs.com/nxl0908/p/7245460.html

 
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|琼殿技术论坛 |nimba_sitemap:appname

相关侵权、举报、投诉及建议等，请发 E-mail：qiongdian@foxmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部