《图解CSS》浮动与清除

·  阅读 242

浮动与清除概要

文档流

css中的块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常我们称之为文档流或标准流。 示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <html>
 <head>
     <style>
         div {width:100px;height:100px;}
     </style>
 </head>
 <body style="background-color: eee">
     <div style="background-color:red">div1</div>
     <div style="background-color:green">div2</div>
     <div style="background-color:blue">div3</div>
 </body>
 </html>
</body>
</html>
复制代码

清除(clear)

语法
   clear : none | left | right | both

   取值
   none  :  默认值。允许两边都可以有浮动对象
   left   :  不允许左边有浮动对象
   right  :  不允许右边有浮动对象
   both  :  不允许有浮动对象
复制代码
定义

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

浮动(float)

语法:
float: left; // 元素向左浮动。
float: right; // 元素向右浮动。
float: none; // 默认值。元素不浮动,并会显示在其在文本中出现的位置。
float: inherit; // 规定应该从父元素继承 float 属性的值。
复制代码
定义:

浮动元素脱离文档流,按照指定的方向(左或右发生移动),直到它的外边缘碰到父元素或者另一个浮动元素为止。

历史:

起初,W3C规定出来的浮动(float)属性的主要目的,是为了实现文本绕排图片的效果,如下示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            display: inline;
            float: left;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <img src="../img/示例图片.jpg" alt="">

    <p>文字文字文字文字文字文字文字文
        文字文字文字字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字</p>
</body>
</html>
复制代码

不添加图片浮动的效果:

添加浮动的效果:

发展:

后来有人用它来做布局,发现不错,这个属性也成了创建多栏布局最简单的方式。 示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <html>
 <head>
     <style>
         div {width:100px;height:100px;}
     </style>
 </head>
 <body style="background-color: eee">
     <div style="background-color:red; float:left;">div1</div>
     <div style="background-color:green; float:left;">div2</div>
     <div style="background-color:blue;float:right;">div3</div>
 </body>
 </html>
</body>
</html>
复制代码

浮动元素脱离了常规的文档流之后,原来紧跟其后的元素就会在空间允许的情况下,向上提升到与浮动元素平齐平坐。

问题一:遮盖问题:向上提升的元素会被浮动的元素盖住,因为浮动的元素已经脱离了标准流,浮动的元素已经和标准流不在同一层次上了。如下实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <html>
 <head>
     <style>
         div {width:100px;height:100px;}
     </style>
 </head>
 <body style="background-color: eee">
     <div style="background-color:red; float:left;">div1</div>
     <div style="background-color:green;">div2</div>
     <div style="background-color:blue;">div3</div>
 </body>
 </html>
</body>
</html>
复制代码

由上图我们可以看出,第二个div会被第一个div给盖住,但是里面文字会被挤到下一行,而且好像是第二个div隐形存在于下一行。

解决办法 利用clear属性,清除浮动造成的影响,注意,clear使用在非浮动元素上,而非浮动元素上面。 clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素,底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。 实例:

问题二:父元素高度塌陷问题:由于浮动元素脱离的文档流,其父元素感知不到子元素的存在,高度便会消失。如下实例:

解决办法一:BFC清除浮动 在父元素添加overflow:auto或overflow:hidden 父元素的这个属性设置为auto或者是hidden,父元素就会扩展包含浮动,这个方法有着比较好的语义性,因为它不需要额外的元素,但是,要记住一点,overflow属性不是为了清除浮动而定义的,要小心不要覆盖住内容或者触发了不需要的滚动条。

解决办法二:clearfix clearfix的方式清除浮动

通用方案:

// 现代浏览器clearfix方案,不支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

// 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}
复制代码

浮动使用场景

1. 文本绕排图片

2.页面布局

3.多元素内联排列(推荐inline-block)

参考地址: www.cnblogs.com/guanghe/p/1… www.jianshu.com/p/09bd5873b… blog.csdn.net/qq_39406353… www.imooc.com/learn/121 www.w3school.com.cn/cssref/pr_c… zhuanlan.zhihu.com/p/81091987 www.imooc.com/article/283… blog.csdn.net/chenxi_li/a…

如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “点赞” “评论” “收藏” 一键三连哦! 听说 👉 点赞 👈 的人运气不会太差,每一天都会元气满满哦 嘿嘿!!! ❤️ ❤️ ❤️ 大家的支持就是我坚持下去的动力。点赞后不要忘了👉 关注 👈我哦!

个人微信:iotzzh 公众号:前端微说 个人网站:www.iotzzh.com

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改