第三节：伪元素、标准文档流、浮动、清除浮动

一. 伪元素

1. 定义

一般页面中的非主题内容可以使用伪元素

2. 与普通元素的区别

(1). 元素：HTML 设置的标签

(2). 伪元素：由 CSS 模拟出的标签效果

3. 种类

(1) ::before 在父元素内容的最前面添加一个伪元素

(2) ::after 在父元素内容的最后添加一个伪元素

4. 特点

(1). 必须设置content属性, 比如没有需要显示的，可以设置 content:""

(2). 伪元素是行内元素，一行可以多个，默认不能设置宽高

代码分享


    
    
    
    Document
    


    
        我是核心内容哦

运行效果

二. 标准文档流

1. 块级元素

从上往下，垂直布局，独占一行常见div

2. 行内元素或行内块元素

从左往右，水平布局，空间不够自动折行常见：a、span

三. 浮动

1. 浮动的作用

用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右

(1). 可以让块级元素脱离标准文档流，在一行显示

(2). 可以让行内元素脱离标准文档流，从而可以设置宽高

2. 写法

左浮动 float:left

有浮动 float：right

3. 注意

浮动的元素不能通过 text-align:center 或者 margin:0 auto，让浮动元素本身水平居中

代码分享

运行效果

4. 浮动带来的问题

如果子元素浮动了，此时子元素不能撑开标准流的块级父元素.

原因：子元素浮动后脱离标准文档流后 → 不占位置

解决方案：详见下面的清除浮动

代码分享-- a脱离标准文档流，不占位置了，所以压在blue的上面

运行效果

四. 清除浮动

1. 直接设置父元素高度

2. 直接给父元素设置 overflow: hidden;

3. 额外标签法

4. 单伪元素法

在父元素的中添加 class="clearfix"

5. 双伪元素法【推荐】

在父元素的中添加 class="clearfix"

代码分享

运行效果

作者 : Yaopengfei(姚鹏飞)
博客地址 : http://www.cnblogs.com/yaopengfei/
声明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
声明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。

04-CSS基础

第三节：伪元素、标准文档流、浮动、清除浮动

相关

标签