6.1.2.7 文档流

一、 标准文档流下有哪些微观现象？

1.  空白折叠现象

　　不管你有多少个空格，浏览器只显示一个

2. 高矮不齐，底边对齐

3. 内容多于一行，换行显示

 

display: block;  独占一行，可设宽高

display: inline;   不独占一行，不能设宽高

display: inline-block;   不独占一行，可设宽高

display:none;   不占位置

visibility: hidden; 不显示，但占位置

 

二、浮动

float: left | right

效果：两个元素并排显示，并且可以设置宽高。

浮动之后，就不区分行内元素或块元素

    三个特性：

　　1. 浮动的元素脱标     

　　　　脱标：脱离了标准流

　　2. 浮动的元素贴靠

　　3. 浮动的元素有“字围”效果

　　　 文字不会被浮动元素遮挡。

　　4. 浮动的元素有紧凑效果

　　　　如果一个元素设置为浮动，并且没有设置宽高，那么就自动收缩为文字的宽高。

 

margin-right: auto 水平居中

 

三、浮动带来的问题，清除浮动

 子盒子动态高度，父盒子不设置高度。但带来的问题是：

　　后面的盒子会顶上去，跑到父盒子的下面去被遮盖。

解决问题：清除浮动

  第1 种方式： 给父盒子设置高度，不推荐

   这种方式不灵活，如果公司产品突然要改，要求父盒子加高，而且不只一处地方，需要手动修改原代码。很麻烦。

 第2种方式：clear: both  内墙方法

     给浮动元素最后面添加一个元素，并且该元素不浮动，然后设置clear:both 清除别人对我的浮动影响。

     clear: left   # 清除左边浮动对我的影响。

     clear:right  # 清除右边浮动对我的影响

     这种办法的弊端是，无缘无故多了一个div元素，使结构冗余。

  第3种方式：伪元素清除浮动  常用

 　  .clearfix:after{

　　　　# 必须要写的这三个内容

　　　　content: '';

　　　　clear: both;

　　　　display: block;

　　}

       # 新浪清除浮动的方法

 　　.clearfix:after{

　　　　content: '.';

　　　　clear: both;

　　　　display: block;

　　　　height: 0px;

　　　　visibility: hidden;

　　}

      给祖先元素添加类class="clearfix"

  第4种清除浮动： overflow

     给浮动元素的父元素添加:

　　　　overflow: hidden;

   

    内容超出部分叫：overflow

　 overflow的值有以下几种：

            默认：visible; 内容不会被修剪，会呈现在元素框之外。

　　　　hidden： 内容会被修剪，并且其余内容是不可见。

　　　　scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

　　　　auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

            inherit：规定应该人父元素继承overflow属性的值。

 

　　  

 

转载于:https://www.cnblogs.com/beallaliu/p/9288657.html