CSS学习之display属性与浮动

1>display

    display属性主要是用来 控制HTML元素的显示和隐藏 与 块级元素与行内元素的转换的。

    display的值，如下

    --> block（块级元素 ）

        block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block

        元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；

        常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。

    --> inline（行内元素）

        inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，

        才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。

        常见的行内元素有：heda、meat、title、lable、span、br 、a、style、em、b、i、strong等。

    --> inline-block（行内块元素）

        同时具有行内元素和块级元素的特点，可同行显示亦可设置大小。

        常见的行内块元素有：img  input  td  

     --> none

        HTML文档中元素存在，但是在浏览器中不显示

        display使用比较多的时候就是 块级元素和行内元素之间的转换。

    例子

    

    

2>浮动

        2.1>引子

        网页本身的格式就是如果是如同div一样的块标签，一排不管占用多少，后面的内容都会隔行接在后

        面及从上到下，元素在文档中的排列位置，在元素排版布局过程中，元素会自动从左往右，从上

        往下的流式排列，这就是文档流的概念，而如果用了浮动就可以改变这种格局

        2.2>浮动是什么

        浮动可以使元素按指定方向排列,直到遇到父元素的边界或另一个浮动元素停止。浮动能使元素脱离

        文档流，提升层级，可以使块元素在一行展示，可以使行内元素支持宽高。

        2.3>浮动的值

        -->left：左浮动 左侧为起始，从左向右排列
        -->right：右浮动  右侧为起始，从右向左排列

        -->none ：不浮动，默认不浮动

        2.4>浮动效果示例

        

        

        如上，给前两个div加上左浮动后，第3个div就上移了，因浮动的模块是不占位置的，很明显，这种

        ‘遮挡’效果并不是我们所预期的，要让它们正常显示，则要 清除浮动；

        

3>清除浮动的方法

        还有一个场景：其实实际当中进行项目布局的时候，一般是不会设置父级元素的height属性，因为这个属性

        不设置会根据子元素的height值自行调整，当子元素设置浮动，不占位置了，就不能“撑”开父级元素的

        高度了，解决之法也是 清除浮动。

        

        子元素增加浮动之后

        

    常用方法1（官方推荐）

    在父元素的内容后增加这一堆属性 ，专“治”各种浮动。  

#daohang:after{
    clear: both;
    content: "";
    height: 0;
    visibility: hidden;
    display: block;
}

    

    常用方法2（简洁些，就超出隐藏）

    

    实际当中，这两种方法用的都很多，在很多大型网站都使用第一种，虽然代码多一点，但是确实能

    解决各种情况的浮动问题。

4>浮动总结