zoukankan      html  css  js  c++  java

  • 清除浮动的7种方法

    使用display：inline-block会出现的情况：

    1.使块元素在一行显示

    2.使内嵌支持宽高

    3.换行被解析了

    4.不设置的时候宽度由内容撑开

    5.在IE6,7下步支持块标签

    由于inline-block属性换行的时候被解析（有间隙）故解决方法使用浮动float:left/right

    使用浮动时出现的情况：

    1.使块元素在一行显示

    2.使内嵌元素支持宽高

    3.不设置不宽高的时候宽度由内容撑开

    4.换行不被解析（故使用行内元素的时候清除间隙的方法可以使用浮动）

    5.元素添加浮动，会脱离文档流，按照指定的一个方向移动，直到碰到父级的边界或者另一个浮动元素停止（文档流是文档中可显示对象在排列时所占用的位置）

     1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 div,span{height:100px;background:red;border:1px solid #000; float:left;}
 8 /*
 9 inline-block
10 
11 1.使块元素在一行显示
12 
13 2.使内嵌支持宽高
14 
15 3.换行被解析了
16 
17 4.不设置宽度的时候宽度由内容撑开
18 
19 5.在IE6,7下不支持块标签
20 
21 浮动:
22 1.使块元素在一行显示
23 
24 2.使内嵌支持宽高
25 
26 3.不设置宽度的时候宽度由内容撑开
27 
28 */
29 </style>
30 </head>
31 <body>
32 <div class="div1">div1</div>
33 <div class="div2">div2</div>
34 <span class="span1">span1</span>
35 <span class="span2">span2</span>
36 </body>
37 </html>

    下面的代码只有box1浮动，则box1，box2重叠一起。两者都浮动就不会重叠

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue; /* float:left;*/}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

    清浮动的方法：

    1.给父级也加浮动（这种情况当父级margin:0 auto;时不居中）

    eg：

    使用display：inline-block会出现的情况：

1.使块元素在一行显示

2.使内嵌支持宽高

3.换行被解析了

4.不设置的时候宽度由内容撑开

5.在IE6,7下步支持块标签

由于inline-block属性换行的时候被解析（有间隙）故解决方法使用浮动float:left/right

使用浮动时出现的情况：

1.使块元素在一行显示

2.使内嵌元素支持宽高

3.不设置不宽高的时候宽度由内容撑开

4.换行不被解析（故使用行内元素的时候清除间隙的方法可以使用浮动）

5.元素添加浮动，会脱离文档流，按照指定的一个方向移动，直到碰到父级的边界或者另一个浮动元素停止（文档流是文档中可显示对象在排列时所占用的位置）

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 div,span{height:100px;background:red;border:1px solid #000; float:left;}
 8 /*
 9 inline-block
10 
11 1.使块元素在一行显示
12 
13 2.使内嵌支持宽高
14 
15 3.换行被解析了
16 
17 4.不设置宽度的时候宽度由内容撑开
18 
19 5.在IE6,7下不支持块标签
20 
21 浮动:
22 1.使块元素在一行显示
23 
24 2.使内嵌支持宽高
25 
26 3.不设置宽度的时候宽度由内容撑开
27 
28 */
29 </style>
30 </head>
31 <body>
32 <div class="div1">div1</div>
33 <div class="div2">div2</div>
34 <span class="span1">span1</span>
35 <span class="span2">span2</span>
36 </body>
37 </html>

下面的代码只有box1浮动，则box1，box2重叠一起。两者都浮动就不会重叠

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue; /* float:left;*/}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

清浮动的方法：

1.给父级也加浮动（这种情况当父级margin:0 auto;时不居中）

eg:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动(不居中了)
*/
</style>
</head>
<body>
<div class="box">
    <div class="div"></div>
</div>
</body>
</html>
    View Code

    2.给父级加display:inline-block;(同方法1，不居中。只有IE6,7居中)

    eg：

     1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 .box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}
 8 .div{ width:200px;height:200px;background:red;float:left;}
 9 /*
10     清浮动
11     1.给父级也加浮动
12     2.给父级加display:inline-block
13 */
14 </style>
15 </head>
16 <body>
17 <div class="box">
18     <div class="div"></div>
19 </div>
20 </body>
21 </html>
    View Code

    3.在浮动元素下加<div class="clear"></div>
        .clear{ height:0px;font-size:0;clear:both;}但是在ie6下，块元素有最小高度，即当height<19px时，默认为19px，解决方法：font-size:0;或overflow:hidden;

    eg：

     1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 .box{ width:300px;margin:0 auto;border:10px solid #000;}
 8 .div{ width:200px;height:200px;background:red;float:left;}
 9 .clear{ height:0px;font-size:0;clear:both;}
10 /*
11     清浮动
12     1.给父级也加浮动
13     2.给父级加display:inline-block
14     3.在浮动元素下加<div class="clear"></div>
15     .clear{ height:0px;font-size:0;clear:both;}
16 */
17 </style>
18 </head>
19 <body>
20 <div class="box">
21     <div class="div"></div>
22         <div class="clear"></div>
23 </div>
24 </body>
25 </html>
    View Code

    4.在浮动元素下加<br clear="all">

    eg:

     1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 .box{ width:300px;margin:0 auto;border:10px solid #000;}
 8 .div{ width:200px;height:200px;background:red;float:left;}
 9 /*
10     清浮动
11     1.给父级也加浮动
12     2.给父级加display:inline-block
13     3.在浮动元素下加<div class="clear"></div>
14     .clear{ height:0px;font-size:0;clear:both;}
15     4.在浮动元素下加<br clear="all"/>
16 */
17 </style>
18 </head>
19 <body>
20 <div class="box">
21     <div class="div"></div>
22     <br clear="all"/>
23 </div>
24 </body>
25 </html>
    View Code

    5.给浮动元素父级加{zoom:1;}
        :after{content:""; display:block;clear:both;}

    eg：

     1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 .box{margin:0 auto;border:10px solid #000;}
 8 .div{ width:200px;height:200px;background:red;float:left;}
 9 .clear{zoom:1;}
10 .clear:after{content:""; display:block;clear:both;}
11 /*
12     清浮动
13     1.给父级也加浮动
14     2.给父级加display:inline-block
15     3.在浮动元素下加<div class="clear"></div>
16     .clear{ height:0px;font-size:0;clear:both;}
17     4.在浮动元素下加<br clear="all"/>
18     
19     5. 给浮动元素的父级加{zoom:1;}
20     :after{content:""; display:block;clear:both;}
21     
22     **在IE6，7下浮动元素的父级有宽度就不用清浮动
23     
24     haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高
25     
26   display: inline-block
27   height: (任何值除了auto)
28   float: (left 或 right)
29    (任何值除了auto)
30   zoom: (除 normal 外任意值) 
31 */
32 </style>
33 </head>
34 <body>
35 <div class="box clear">
36     <div class="div"></div>
37 </div>
38 </body>
39 </html>
    View Code

    6.给浮动元素父级加overflow:auto;

     1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 .box{ width:300px;border:1px solid #000;overflow:auto;}
 8 .div1{ width:260px;height:400px;background:Red;float:left;}
 9 </style>
10 </head>
11 <body>
12 <div class="box">
13     <div class="div1"></div>
14 </div>
15 </body>
16 </html>
    View Code

     7.给浮动父级加position:absolute;或者position:fixed;

    eg:

     1 <style>
 2 #box1{border:30px solid red; position:absolute;/*position:fixed;*/}
 3 #box2{width:300px; height:300px; background:blue; float:left;}
 4 
 5 </style>
 6 </head>
 7 
 8 <body>
 9 
10     <div id="box1">
11         <div id="box2"></div>
12     </div>
13 
14 </body>

    　　
  • 相关阅读:
    Kafka 生产者 自定义分区策略
    同步互斥
    poj 1562 Oil Deposits(dfs)
    poj 2386 Lake Counting(dfs)
    poj 1915 KnightMoves(bfs)
    poj 1664 放苹果（dfs)
    poj 1543 Perfect Cubes (暴搜)
    poj 1166 The Clocks (暴搜）
    poj 3126 Prime Path(bfs)
    处理机调度
  • 原文地址：https://www.cnblogs.com/wxydigua/p/3424882.html
Copyright © 2011-2022 走看看