css-浮动详解(一)

注册博客园也有一段时间了,一直都是看其他大牛的博客,感触颇多,都是我要学习和努力的目标,慢慢的心底也萌生了要写博客的嫩芽,虽然自己也是步入前端这一行业不久的工作者,希望各位大前端行业的前辈多多指教啦!

我写博客的目的呢就是,一呢,总结自己学过和运用的的技术和知识,系统的梳理知识点和原理,加深印象;二呢,报着学习交流的态度,希望大家多多督促,有什么讲的不对的地方欢迎指出啦!当前是为了一份更好的更适合自己的job,find好的工作机会啦!

我相信,一步步的坚持下去,会成为一个优秀的前端程序媛!哈哈!

第一次写博客,虽然接触css许久,也有过许多的HTML+css页面开发的项目经验,但是对float浮动这个原理有时候还是那么是懂非懂得样子,今天我就系统的梳理下浮动相关的知识,献丑啦!

了解float之前先简单的了解下什么是文档流。

 

文档流:文档流是文档中可显示对象在排列中所占用的位置。通俗的说,将窗体自上而下分成一行一行,并在每行中按从左到右挨次排放元素,即为文档流。

比如网页的div标签它默认占用的宽度位置是一整行,p标签默认占用宽度也是一整行,因为div标签和p标签是块状对象。网页中大部分对象默认是占用文档流,也有一些对象是不占用文档流的,比如表单中的隐藏域。

浮动的定义:

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。---《w3c》,通俗的说,就是浮动元素漂浮的普通流之上。

 

CSS 中所有的float属性

属性 描述 CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit
1
float 指定一个盒子(元素)是否可以浮动。 left
right
none
inherit
1

 

CSS的float特征(简洁的总结了一下):

1:使块元素在一行显示;

2:使内嵌元素支持宽高;

3:不设置宽度的时候宽度由内容撑开;

4:脱离文档流

5:提升层级半层

 

 下面详细分解float:

 

demo1:设置元素float:left

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css_float</title>
    </head>
    <style type="text/css">
        body{
            margin:0;
            font-family: "微软雅黑";
            font-size: 20px;
        }
        #wrap{
            margin: 0 auto;
            width: 800px;
            border: 2px dashed black;
            height: 600px;
        }
        .div1,.div2,span{
            float: left;
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
        .div2{
            width: 180px; 
            height: 120px;
            background-color: coral;
        }
        .span1{
            width: 220px;
            height: 280px;
            background-color: burlywood;
        }
        .span2{
            width: 280px;
            height: 330px;
            background-color: crimson;
        }
    </style>
    <body>
        <div id="wrap">
            <div class="div1">div1</div>
            <div class="div2">div2</div>
            <span class="span1">span1</span>
            <span class="span2">span2</div>
        </div>
    </body>
</html>
View Code

输出结果:

css-浮动详解(一)_第1张图片

demo2:设置元素float:right

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css_float</title>
    </head>
    <style type="text/css">
        body{
            margin:0;
            font-family: "微软雅黑";
            font-size: 20px;
        }
        #wrap{
            margin: 0 auto;
            width: 800px;
            border: 2px dashed black;
            height: 600px;
        }
        .div1,.div2,span{
            float: right;
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
        .div2{
            width: 180px; 
            height: 120px;
            background-color: coral;
        }
        .span1{
            width: 220px;
            height: 280px;
            background-color: burlywood;
        }
        .span2{
            width: 280px;
            height: 330px;
            background-color: crimson;
        }
    </style>
    <body>
        <div id="wrap">
            <div class="div1">div1</div>
            <div class="div2">div2</div>
            <span class="span1">span1</span>
            <span class="span2">span2</div>
        </div>
    </body>
</html>
View Code

输出结果:
css-浮动详解(一)_第2张图片

结论1:

浮动元素会生成块级框,无论这个元素本身是什么,所以浮动元素会使块元素随着浮动指定的方向并列一行显示,浮动元素使内嵌元素支持宽度和高度。

浮动元素的左(或右)外边界不能超出其包含块的左(或右)内边界,也就是说,左浮动的元素左外边界向左只能到其包含块的左内边界,右浮动元素同理

一个浮动元素的顶端不能比其父元素的内顶端更高,从上图显示可以看出,无论是左浮动,还是右浮动;这样避免了浮动元素一直浮动到文档的顶端

 

 demo3:标准流的块元素div

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css_float</title>
    </head>
    <style type="text/css">
        body{
            margin:0;
            font-family: "微软雅黑";
            font-size: 20px;
        }
        #wrap{
            margin: 0 auto;
            width: 800px;
            border: 2px dashed black;
            height: 600px;
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
        .div2{
            width: 180px; 
            height: 120px;
            background-color: coral;
        }
        .div3{
            width: 220px;
            height: 100px;
            background-color: burlywood;
        }
        .div4{
            width: 280px;
            height: 150px;
            background-color: crimson;
        }
    </style>
    <body>
        <div id="wrap">
            <div class="div1">div1</div>
            <div class="div2">div2</div>
            <div class="div3">span1</div>
            <div class="div4">span2</div>
        </div>
    </body>
</html>
View Code

输出结果:

 css-浮动详解(一)_第3张图片

demo4:把demo3中的div2设置为float:left,

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>css_float</title>
 6     </head>
 7     <style type="text/css">
 8         body{
 9             margin:0;
10             font-family: "微软雅黑";
11             font-size: 20px;
12         }
13         #wrap{
14             margin: 0 auto;
15             width: 800px;
16             border: 2px dashed black;
17             height: 600px;
18         }
19         .div1{
20             width: 100px;
21             height: 100px;
22             background-color: cadetblue;
23         }
24         .div2{
25             width: 180px; 
26             height: 120px;
27             background-color: coral;
28             float: left;
29         }
30         .div3{
31             width: 220px;
32             height: 220px;
33             background-color: burlywood;
34         }
35         .div4{
36             width: 280px;
37             height: 150px;
38             background-color: crimson;
39         }
40     </style>
41     <body>
42         <div id="wrap">
43             <div class="div1">div1</div>
44             <div class="div2">div2</div>
45             <div class="div3">div3</div>
46             <div class="div4">div4</div>
47         </div>
48     </body>
49 </html>
View Code

输出结果:

css-浮动详解(一)_第4张图片

结论2:

当div2 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,但是div1,div3,div4仍然在普通流中,至上到下依次排列;所以div3会自动上浮,直到上个元素的底端。

 

 

demo5:

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css_float</title>
    </head>
    <style type="text/css">
        body{
            margin:0;
            font-family: "微软雅黑";
            font-size: 20px;
        }
        #wrap{
            margin: 0 auto;
            width: 800px;
            border: 2px dashed black;
            height: 600px;
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
        .div2{
            width: 180px; 
            height: 120px;
            background-color: coral;
            float: left;
        }
        .div3{
            width: 220px;
            height: 220px;
            background-color: burlywood;
            float: right;
        }
        .div4{
            width: 480px;
            height: 150px;
            background-color: crimson;
            /*float: left;*/
        }
    </style>
    <body>
        <div id="wrap">
            <div class="div1">div1</div>
            <div class="div2">div2</div>
            <div class="div3">div3</div>
            <div class="div4">div4</div>
        </div>
    </body>
</html>
View Code

输出结果:

 css-浮动详解(一)_第5张图片

 

结论3:

浮动元素的顶端不能比之前所有的浮动元素或块级元素的顶端更高。

 

 

de

 
   
   
                                                       
                  上传图片     插入代码(推荐) 插入代码        
段落  
字体  
5(18pt)  
       
                                 

mo6:所有div设置做浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css_float</title>
    </head>
    <style type="text/css">
        body{
            margin:0;
            font-family: "微软雅黑";
            font-size: 20px;
        }
        #wrap{
            margin: 0 auto;
            width: 800px;
            border: 2px dashed black;
            height: 600px;
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            float: left;
        }
        .div2{
            width: 180px; 
            height: 120px;
            background-color: coral;
            float: left;
        }
        .div3{
            width: 220px;
            height: 220px;
            background-color: burlywood;
            float: left;
        }
        .div4{
            width: 480px;
            height: 150px;
            background-color: crimson;
            float: left;
        }
    </style>
    <body>
        <div id="wrap">
            <div class="div1">div1</div>
            <div class="div2">div2</div>
            <div class="div3">div3</div>
            <div class="div4">div4</div>
        </div>
    </body>
</html>
View Code

 

输出结果:

css-浮动详解(一)_第6张图片

css-浮动详解(一)_第7张图片

 

 

结论4:

浮动元素不能超出其包含元素的边界。如果超出了边界,后者的浮动元素就会挤到新行上。如果前面的浮动元素高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”,后者浮动元素的顶端始终与上一个浮动元素的底部对齐
所以因为上图div1,2,3,4元素总体宽度超过了他的父级宽度,div4被挤到一个新行上,顶端与上一个浮动元素div3的底部对齐

 

你可能感兴趣的:(css-浮动详解(一))