css 伪类清除浮动,CSS中盒模型、浮动以及清除浮动的方法

盒模型

在 htm 中每一个元素都可以看成是一个盒子，默认情况下盒子的边框是无，背景色是透明的，所以在默认情况下看不到盒子。

盒子由 margin , border , padding , content (盒子中的内容)四部分组成。

1、margin 元素与元素之间的距离

a、上边距 margin-top

b、右边距 margin-right

c、下边距 margin-bottomd

d、左边距 margin-leftb

A、1 个属性值——margin:10px;表示上下左右的值都是该值

B、2 个属性值 ——margin:10px 20px;前者表示上下值，后者表示左右的值

C、4 个属性值——margin:10px 20px 30px 5px;表示上、右、下、左

D、3 个值——margin:10px 20px 5px;(一般不用)表示上、左右、下

2、border(对不同的边框设置不同的属性值 如同上述(a、b、c、d)(A、B、C、D)格式

边框粗细 border-width

边框样式 border-style

边框颜色 border-color

3、padding 内边距 用于控制内容与边框的距离对 padding 设置不同的方向和数值 如同上述(a、b、c、d)和(A、B、C、D)格式)

盒子在标准流中的定位原则：行内元素之间的水平 margin 相加块级元素之间的竖直 margin 取最大值(这个现象称为 margin 的塌陷(合并)现象

display 属性

display：none;(隐藏不占网页空间)

display：block(将目标元素转换成块元素)span 原本是行内元素，设置宽高是没有效果的，只有转换成块元素才有效果。

display：inline(将目标元素设置为行内元素)转换成了行内元素，则设置宽高没有效果display：inline-block(将目标元素设置为行内块元素)既具有行元素特性，又具有块元素的特性

浮动

“标准文档流”(Normal Document Stream)，简称“标准流”，是指在不使用其他与排列和定位相关的特殊 CSS 规则时，各种元素的排列规则。

float：none(默认)/left(左浮动)/right(右浮动)

浮动：使元素脱离文档流。

1.所有的元素都可以浮动。

2.具有 float 属性元素在父标签中是不占空间的。 3.float 能解决标签之间有间隙的问题。

float 对行内属性标签的影响：

1、 float 之后可以设置 width 和 height 属性。

2、并支持 margin 和 padding 属性。

float 对块属性标签的影响

1、在没有设置宽高的情况下浮动后，内容撑开宽度高度。

2、可以使块属性元素并排排列。

清除浮动

1、clear 应用的原理是清除元素两侧浮动元素带来的影响。

clear: left; 左侧不允许有浮动元素(本身起作用)，邻后的元素需清除左侧浮动元素带来的影响则可以用 clear:left； 进行清除。

clear: right; 右侧不允许有浮动元素(本身起作用)，邻后的元素需清除右侧浮动元素带来的影响则可以用 clear:right；进行清除。

clear: both;清除元素两侧浮动影响。原理：添加一个空 div，利用 css 的 clear:both 清除浮动，让父级 div 能自动获取到高度。

2、overflow: hidden;超出内容隐藏

(父级下的子元素都是浮动状态，父级添

overflow:hidden;属性解决子元素浮动造成父级高度塌陷现象，父级的相邻元素正常显示。)

overflow: visible：显示超出内容，不剪切内容也不添加滚动条 　　 　　overflow: auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

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

3、after 伪类清除浮动

.clearfix:after {content:""; display:block;clear:both; }

.clearfix { zoom:1; }//IE 清除浮动Eg:

我是浮动 div 一

我是浮动 div 二

我是浮动 div 三