qg777钱柜误乐

热门关键词: qg777钱柜误乐

编程CSS那些事儿-阅读随笔3(清除浮动),css随笔

 在各种浏览器兼容问题上,这样让清除浮动更难了,下面总结8种清除浮动的方法:

要素脱离文档流诱致的可观塌陷难题

1.难题陈诉:
在文书档案流中,父成分的冲天默许是被子成分撑开的,也正是子成分多高,父成分就多高。但是当子成分设置浮动之后,子成分会完全退出文书档案流,那个时候将会变成子成分不能够撑起父成分的惊人,导致父成分的惊人塌陷。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">     
        .box1{
            border: 10px red solid;
        }

        .box2{
            background-color: yellow;
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

编程 1

要素脱离文书档案流的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">     
        .box1{
            border: 10px red solid;
        }

        .box2{
            background-color: yellow;
            width: 100px;
            height: 100px;
            /* float: left; */
        }
        .box3{
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>
</html>

编程 2

想要那样的效应.png

编程 3

设置浮动之后(中度塌陷难题).png

  • 鉴于父成分的可观塌陷,则父成分的装有因素都会升高移动,那样会形成页面结构散乱,所以在支付中必需求防止现身中度塌陷难点

2.主题材料毁灭生龙活虎:
基于W3C标准,在页面瓜月素都有多个蒙蔽的属性叫Block Formatting Context,简单称谓BFC,该属性能够设置张开或然关闭,私下认可是关闭的。

当张开BFC后,成分将会全体以下特征:

  • 要素的垂直外边距不会和子成分重叠
  • 开启BFC的成分不会被变型成分所掩瞒
  • 拉开BFC的元素得以包罗浮动元素

何以打开BFC:

  • 1卡塔尔设置成分的变迁(就算能够撑开父成分,不过会促成父成分的宽度错失,并且会产生上边的要素上移,不能够解决难题卡塔尔国

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
/非父成分设置浮动/
float: left;
}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }
    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>

  ![给父元素设置浮动的结果.png](http://upload-images.jianshu.io/upload_images/3063110-e3f921af945a6f10.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

+ 2)设置元素的绝对定位(和1效果差不多,不推荐)
+ 3)设置元素的inline-block(父元素的宽度又没了,不推荐使用)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页题目</title>
<style type="text/css">
.box1{
border: 10px red solid;
display: inline-block;
}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }
    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>

  ![第三种方式的效果图.png](http://upload-images.jianshu.io/upload_images/3063110-39b189264d80ed92.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

+ 4)将元素的overflow设置为一个非visible的值(推荐这种方式开启BFC,副作用小,IE6及以下不支持,此时可以使用hasLayout,给父元素设置```zoom:1```,此处不赘述)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
overflow: hidden;
}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }
    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>

  ![overflow为hidden.png](http://upload-images.jianshu.io/upload_images/3063110-ed5337266a7dad7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


******
> ***3.问题解决二:***
clear属性可以用于清除元素周围的浮动对元素的影响。也就是元素不会因为上方出现了浮动元素而改变位置。

+ 可选值:
    - left :忽略左侧浮动 (清除左侧浮动对当前元素的影响)

    - right :忽略右侧浮动 (清除右侧浮动对当前元素的影响)

    - both :忽略全部浮动 (清除两侧对他影响最大的浮动对)

    - none :不忽略浮动,默认值 

/经过空白撑开父元素,排除浮动,基本未有副功用,能够包容各样浏览器/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页题目</title>
<style type="text/css">
.box1{
border: 10px red solid;
clear: left;
}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }
    .clear{
        clear: left;
    }
    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
<div class="box3"></div>
</body>
</html>

![clear.png](http://upload-images.jianshu.io/upload_images/3063110-adcdc009e889bc38.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

******
> ***4.问题解决三:***通过after伪类,和添加div效果一样,而且不会再页面中添加div,最推荐的方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
clear: left;
}

    /* 通过after伪类来选择box1的后面 */
    .clearfix:after{
        /* 必须设置一个空的congtent,否则不起作用  */ 
        content: "";
        /* 转换成块元素  */
        display: block;
        clear: both;
    }
    /*为了兼容IE6*/
    .clearfix{zoom:1}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }

    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>

CSS那多少个事情-阅读随笔3(消弭浮动),css小说

  浮动首要是由浮动(float)属性招致的页面错位现象,解除浮动不只好减轻页面错位的现象,还能解决子成分浮动招致父成分背景无法自适应子成分中度的主题材料。在CSS样式中,首要使用clear属性中的both、left和right 3个属性值打消由浮动发生的左、右浮动作效果果。

风姿罗曼蒂克、浮动现象例子

上面举一个相当的轻易的转换的事例,假如二个float_box(背景象为#aff)中隐含三个div,且四个是左浮动(float:left),另二个是右浮动(float:right)。在float_box外再增多七个尚未调换属性的div(no_float),那么代码甚至预期效应和实效如下:

编程 4 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .float_box{ 8 background-color: #aff; 9 } 10 .float_left{ 11 float:left; 12 width: 200px; 13 height: 100px; 14 border: 2px solid #f00; 15 } 16 .float_right{ 17 float:right; 18 width: 200px; 19 height: 100px; 20 border: 2px solid #00f; 21 } 22 .no_float{ 23 color: #fff; 24 background-color: #aaa; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="float_box"> 30 <div class="float_left">左浮动成分</div> 31 <div class="float_right">右浮动成分</div> 32 </div> 33 <div class="no_float">测量检验地点</div> 34 35 </body> 36 </html> View Code

   编程 5    编程 6

                                     a.预期效果                                                                                 b.实效

                              图1 效果图

二、清除浮动的方式

1.利用br元素的clear属性

  br标签属性中的clear属性具备left、right和all四个属性值,能够用来扼杀浮动。不过此种方法必要引进二个外加的br标签,破坏了HTML的庐山真面目目结构。代码如下:

编程 7 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .float_box{ 8 background-color: #aff; 9 /*zoom: 1;*/ 10 /*overflow: hidden;*/ 11 } 12 .float_left{ 13 float:left; 14 width: 200px; 15 height: 100px; 16 border: 2px solid #f00; 17 } 18 .float_right{ 19 float:right; 20 width: 200px; 21 height: 100px; 22 border: 2px solid #00f; 23 } 24 .no_float{ 25 color: #fff; 26 background-color: #aaa; 27 /*clear: both;*/ 28 } 29 </style> 30 </head> 31 <body> 32 <div class="float_box"> 33 <div class="float_left">左浮动成分</div> 34 <div class="float_right">右浮动成分</div> 35 <br clear="all"> 36 </div> 37 <div class="no_float">测验地方</div> 38 </body> 39 </html> View Code

功用如图1(a)所示。

2.选取css样式中的clear属性

  a.引进br标签,可是为其增多css修饰.clear_float{clear:both;},代码如下:

编程 8 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .float_box{ 8 background-color: #aff; 9 /*zoom: 1;*/ 10 /*overflow: hidden;*/ 11 } 12 .float_left{ 13 float:left; 14 width: 200px; 15 height: 100px; 16 border: 2px solid #f00; 17 } 18 .float_right{ 19 float:right; 20 width: 200px; 21 height: 100px; 22 border: 2px solid #00f; 23 } 24 .no_float{ 25 color: #fff; 26 background-color: #aaa; 27 /*clear: both;*/ 28 } 29 .clear_float{ 30 clear: both; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="float_box"> 36 <div class="float_left">左浮动成分</div> 37 <div class="float_right">右浮动成分</div> 38 <br class="clear_float"> 39 </div> 40 <div class="no_float">测量检验地方</div> 41 </body> 42 </html> View Code

职能如图1(a)所示。

  b.在产生转换的要素后的要素中增添.clear_float{clear:both;},幸免引进多余的HTML成分,代码如下:

编程 9 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .float_box{ 8 background-color: #aff; 9 /*zoom: 1;*/ 10 /*overflow: hidden;*/ 11 } 12 .float_left{ 13 float:left; 14 width: 200px; 15 height: 100px; 16 border: 2px solid #f00; 17 } 18 .float_right{ 19 float:right; 20 width: 200px; 21 height: 100px; 22 border: 2px solid #00f; 23 } 24 .no_float{ 25 color: #fff; 26 background-color: #aaa; 27 /*clear: both;*/ 28 } 29 .clear_float{ 30 clear: both; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="float_box"> 36 <div class="float_left">左浮动成分</div> 37 <div class="float_right">右浮动成分</div> 38 </div> 39 <div class="no_float clear_float">测验地方</div> 40 </body> 41 </html> View Code

效果如下图:

编程 10

  能够从上图中看出,纵然这种方法解除了变化的错误,不过float成分的父成分高度没有适应float成分的高度(背景没颜色)。

3.利用css中的overflow属性

  为float元素的父成分增加css属性overflow:hidden,也足防止去浮动且中度适应。不过该属性会使div溢出一些遮盖,存在缺欠。代码如下:

编程 11 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .float_box{ 8 background-color: #aff; 9 overflow: hidden; 10 } 11 .float_left{ 12 float:left; 13 width: 200px; 14 height: 100px; 15 border: 2px solid #f00; 16 } 17 .float_right{ 18 float:right; 19 width: 200px; 20 height: 100px; 21 border: 2px solid #00f; 22 } 23 .no_float{ 24 color: #fff; 25 background-color: #aaa; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="float_box"> 31 <div class="float_left">左浮动成分</div> 32 <div class="float_right">右浮动成分</div> 33 </div> 34 <div class="no_float">测量试验地方</div> 35 </body> 36 </html> View Code

效用如图1(a)所示。

注:overflow:visible消亡浮动只对ie浏览器有效,overflow:auto撤废浮动且多层嵌套时,会对点击事件时有发生震慑。

4.利用css中的display:table属性

  为float成分的父成分增添css属性display:table,也能够排除浮动且中度适应。不过会唤起意外的结局。代码如下:

编程 12 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .float_box{ 8 background-color: #aff; 9 display:table; 10 } 11 .float_left{ 12 float:left; 13 width: 200px; 14 height: 100px; 15 border: 2px solid #f00; 16 } 17 .float_right{ 18 float:right; 19 width: 200px; 20 height: 100px; 21 border: 2px solid #00f; 22 } 23 .no_float{ 24 color: #fff; 25 background-color: #aaa; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="float_box"> 31 <div class="float_left">左浮动成分</div> 32 <div class="float_right">右浮动成分</div> 33 </div> 34 <div class="no_float">测验地点</div> 35 </body> 36 </html> View Code

职能如下图所示:

编程 13

5.利用css伪对象::after

  毁灭浮动的标准之一是必得在调换成分之后,由此不能不动用::after而不接收::before (对于ie浏览器,要求9或以上才支撑State of Qatar,代码如下:

编程 14 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .float_box{ 8 background-color: #aff; 9 } 10 .float_left{ 11 float:left; 12 width: 200px; 13 height: 100px; 14 border: 2px solid #f00; 15 } 16 .float_right{ 17 float:right; 18 width: 200px; 19 height: 100px; 20 border: 2px solid #00f; 21 } 22 .no_float{ 23 color: #fff; 24 background-color: #aaa; 25 /*clear: both;*/ 26 } 27 .float_box::after{ 28 clear: both; 29 display: block; 30 content: ""; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="float_box"> 36 <div class="float_left">左浮动成分</div> 37 <div class="float_right">右浮动成分</div> 38 </div> 39 <div class="no_float">测验地点</div> 40 </body> 41 </html> View Code

效果与利益如图1(a)所示。

注:对于ie浏览器,上述方式都亟待在.float_box中添加zoom:1属性,来消除ie的haslayout效果。

浮动首假使由浮动(float)属性诱致的页面错位现象,杀绝浮动不仅可以扑灭页面错位的场馆,...

改换招致的标题:父级标签中度塌陷---其实正是从未中度

编程 15Snip20170615_11-1.png

下边八中艺术:<h4>1、父级div定义 height</h4>

<pre><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title>

 <style type="text/css"> #box { width: 300px; /*解决问题*/ height: 400px; background: bisque; border: 2px solid black; } #div1 { width: 100px; height: 200px; float: left; background: red; } #div2 { width: 100px; height: 200px; float: right; background: yellow; } </style></head><body> <div > <div > 1 </div> <div > 2 </div> </div> </body>

</html>

</pre>

原理:父级div手动定义height,就解决了父级div不能自动获取到惊人的主题素材。

优点:简单、代码少、轻易精晓

破绽:只相符中度稳固的结构,要付出正确的万丈,假诺中度和父级div不相近不常间,会发生难点

提出:不推荐使用,只提议中度稳固的布局时使用

<h4>2、结尾处加空div标签 clear:both </h4>

编程 16Snip20170615_12.png

<pre><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title>

 <style type="text/css"> #box { width: 300px; background: bisque; border: 2px solid black; } #div1 { width: 100px; height: 200px; float: left; background: red; } #div2 { width: 100px; height: 200px; float: right; background: yellow; } .clearflow { clear: both; } </style></head><body> <div > <div > 1 </div> <div > 2 </div> <!--解决问题--> <div > </div> </div> </body>

</html></pre>

本文由qg777发布于编程,转载请注明出处:编程CSS那些事儿-阅读随笔3(清除浮动),css随笔

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。