CSS知识整理(五) 浮动

CSS知识整理(五) 浮动

目录

CSS知识整理(五) 浮动

 

一、标准文档流

二、元素等级

三、display

四、float

五、父级元素边框塌陷

1.问题描述

2.解决办法

---

一、标准文档流

对于网页中的元素，在没有任何CSS浮动或者定位效果时，元素会默认采用从左到右，从上到下的排列方式，这种默认的“流”的元素排列方式成为标准文档流。

标准文档流会出现以下三种微观现象需要注意：

• 空白折叠现象（排版是需要注意）

html文本中出现换行或者空格（多个空格会单个空格），浏览器中文字之间就会出现一个空格

img便签换行写，图片也会出现空格

• 高矮补齐，底边对齐

文字图片高度不一致，则底边对齐

• 自动换行

文字过多，自动换行显示。

二、元素等级

• 块级元素

在文档流中单独占一行，不和其他块级元素以及行内元素同行显示，可设置宽和高

• 行内元素（内联元素）

与其他行内元素并列排列在同一行，块级元素使用display属性可以转换为行内元素（行内块元素）

注意：html标签分为：

• 文本级标签：p、span、a、b、i、u、em。
• 容器级标签：div、h系列、li、dt、dd。

除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。所有的容器级标签都是块级元素，还有p标签。

三、display

display 属性规定元素应该生成的框的类型

{
    display:block; /*inline,inline-block等*/
}

• block

将元素设置为块级元素

• inline

将元素设置为为行内元素

• inline-block

将元素设置为可在行内块元素，就是可以设置元素宽和高的行内元素

• none

不显示此元素

四、float

在不使用浮动情况下，html元素是严格按照标准文档流的从左到右，从上到下的规则排列的，这样就会导致网页布局产生较大缺陷，浮动可以使元素脱离文档流，“浮在”其他元素表面上

比如有如下几个块：

对块儿三使用：

{
    float:left
}

效果如下

块儿三把块儿四盖住了，因为块儿三已经在原来的位置浮起来了，对块儿三使用：

{
    float:right
}

如下

这样就是更清楚了

浮动有一个重要属性clear，有如下属性值

left	消除左浮动
right	消除右浮动
both	消除两边浮动
none	取消消除浮动

 需要注意的是，clear知识针对当前元素进行处理，无权干涉其他元素，比如设置clear:left, 当前元素会另起一行排列，元素左浮动使用clear:right 时，哪怕右边有浮动元素，右边元素也不会另起一行。clear:right 适用于右浮情况：

全部右浮：

使用clear:right

五、父级元素边框塌陷

1.问题描述

看个例子，浮动之前，黑色框为有色块的父div:

<div id="bb">
    <div id="b1">块儿一</div>
    <div id="b2">块儿二</div>
    <div id="b3">块儿三</div>
    <div id="b4">块儿四</div>
</div>

 

将有色块设置为浮动后：

可以看到黑色框被挤压到了一个非常小的地方，这就是父元素边框塌陷问题

2.解决办法

• 增加父级元素高度

手动调节父元素高度，简单实用，但是看上去总归有点蠢

• 增加空的div

手动添加空的div在末尾，并设置其为左右抗浮动

<div id="bb">
    <div id="b1">块儿一</div>
    <div id="b2">块儿二</div>
    <div id="b3">块儿三</div>
    <div id="b4">块儿四</div>
    <div style="clear: both"> </div>
</div>

 

• overflow

在父级元素中添加：

{
    overflow: hidden
}

overflow可以处理当子元素超出父元素边框情况不设置长宽则默认包围子元素

 

• 父类添加伪类：after

#father:after{
    content:"";
    display:block;
    clear:both;    
}

该方法和手动添加空div思想一样，也是目前最被认可的方法，推荐使用。