css中float和position属性

时间 2019-11-08

标签 css float position 属性栏目 CSS 繁體版

原文原文链接

盒子的三种定位形式html

在标准流下的定位
在浮动属性下的定位
在定位属性下的定位
除非设置浮动属性或定位属性，不然全部盒子都是在标准流中定位
顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。浏览器

盒子的浮动
在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列
若是仅仅按照标准流的方式进行排列，就只有这几种可能性，限制太大。CSS的
指定者也想到了这样排列限制的问题，所以有给出了浮动和定位方式进行盒子的排列
从而使排版的灵活性大大提升。
例如：有时但愿相邻块级元素的盒子左右排列（全部盒子浮动）或者但愿一个盒子被另外一个盒子中的内容
所环绕（一个盒子浮动）作出图文混排的效果，这时最简单的办法就是运用浮动属性使盒子在浮动方式下定位。ide

在标准流中，一个块级元素在水平方向自动伸展，在他的父元素中占满一行；而在竖直方向和其余元素依次排列，不能并排，使用
浮动方式后，这种排列方式就会发生改变
CSS中有一个float属性，默认值为none,也就是标准流一般的状况，若是将float属性的值设为left或者right，元素就会向其父元素
的左侧或右侧靠紧，同时盒子的宽度再也不伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来肯定宽度。布局

盒子的浮动主要是排版使用，咱们默认DIVtable标签作出来的内容都是2Dhtm

浮动的清除对象

clear是清除浮动属性，它的取值有left、right、both和none(默认值)，若是设置盒子的清除属性clear值为left或right,表示该盒子
左边和右边不容许有浮动的对象。设为both，表示两边都不能够有浮动的对象，所以该盒子将会在浏览器中另起一行显示。
文档

CSS positionit

CSS定位（positioning）属性容许你对元素进行定位
CSS为定位和浮动提供了一些属性，利用这些属性，能够创建列式布局，将布局的一部分与另外一部分重叠，
还能够完成多年来一般须要使用多个表格才能完成的任务。io

CSS定位机制
CSS有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，不然全部框都在普通流中定位。也就是说，普通流中的元素位置由元素在（X）HTML中的位置决定
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来的。table

CSS position属性
经过使用position属性，咱们能够选择4种不一样类型的定位，这会影响元素框生成的方式。
position属性值的含义：
static（默认值）元素框正常生成。块级元素生成一个矩形框，做为文框流的一部分，行内元素则会建立一个或多个行框，置于其父元素中。
relative元素框偏移某个距离。元素仍保持其未定位前的形状，它本来所占的空间仍保留。
absolute元素框从文档流彻底删除，并相对于其包含块定位。包含快多是文档中的另外一个元素或者是初始块。元素原先在正常流中
所占的空间会关闭，就好像元素原来不存在同样。元素定位后生成一个块级框，而不论原来它的正常流中生成何种类型框。
fixed元素框的表现相似于将position设置为absolute，不过其包含块是视窗自己。（滚动条滚动时fixed的盒子一直浮动在固定位置）
position:fixed;
top:0px;
left:500px;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>float</title>
    <style>
    #header
    {    width: 1000px;
        height: 100px;
        background-color: blue;
        margin:auto;/*天然居中*/
        text-align: center;
    }
    #container
    {    width: 1000px;
        height: 50px;
        background-color: gray;
        margin:auto;/*天然居中*/
        text-align: center;
    }
    #main
    {    width: 1000px;

        background-color: steelblue;
        margin:auto;/*天然居中*/
    }
    #nav
    {    width: 200px;
        height: 500px;
        background-color: red;
       margin: 0px 10px;/*上右下左*/
        float: left;
    }
    #content
    {    width: 500px;
        height: 500px;
        background-color: green;
        margin: 0px 10px;/*上右下左*/
        float: left;
    }
    #side
    {    width: 200px;
        height: 500px;
        background-color: blue;
        margin: 0px 10px;/*上右下左*/
        float: left;
    }
    #footer
    {    width: 1000px;
        height: 30px;
        background-color: bisque;
        margin:auto;/*天然居中*/
        clear: both;
        text-align: right;
    }


    </style>
</head>
<body>
<div id="header">顶部</div>
<div id="container">内容</div>
<div id="main">主体
    <div id="nav">左边</div>
    <div id="content">主内容</div>
    <div id="side">右边框</div>
    <div id="footer">地址：xxxxx 电话：xxxxxx</div>

</div>
</body>
</html>

1. CSS position属性、float属性
2. CSS 布局的position属性、float属性
3. CSS中Position、Float属性深入探讨
4. CSS中Position、Float属性深刻探讨
5. css的position,float属性的理解
6. CSS中Position属性
7. CSS float属性
8. CSS position 属性
9. float属性与position(定位)
10. CSS中的Position属性
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• JDK13 GA发布：5大特性解读
• Scala 中文乱码解决