浮动 伪元素 圆角属性---朱雀老师

示例:

用 inline-block  做,会出现2个问题:

空格.和基线问题

今后, 我们使用 浮动 来实现横排显示

来个案例:

 

添加浮动后:

现在,使用float 主要是为了 使 块元素 横排显示.

没有了inline-block 产生的毛病

浮动的原理

 

右浮动:

 

如果对前面的<p> 也来一个浮动,则会四个盒子都会横排显示

大盒子内部的细小盒子, 也用的是左浮动:

单给一个盒子 加浮动,肯定是错误的. 后面的内容会被遮盖.

 

 

第三个子元素盒子大了,或者,父元素的宽度不够,则 子元素会掉下来,如上图.

特别是当你的子元素,设置了padding  border 后 把本身称大了 .因此,我们就增加父级的数据,或者减小子级的数据以使可以容下所以的子元素

如果在浮动到时候,子元素被卡住了, 有可能是被上面的溢出的东西卡住了.

以上的2个图是卡住的示例. 

三个子元素都漂浮了,导致父级盒子没有了子元素撑着,所以,高度就成0了.高度塌陷.

 就像老师所说 的, 成了空巢老人. 

高度塌陷 是个大问题,会页面混乱.

如何解决
直接给上父级的高度. (粗暴有效,但不是最好的)

\

第二种方法  让父级 虚拟框.

定位

绝对定位.

不会为了 消除浮动对父元素的高度的影响而使用一个绝对定位的.

但是, 父级恰好是 绝对定位,则更好了. 不是我们主动添加的

clear    清除浮动的样式

清除右浮动

 

如果,不管是左还是右,则使用clear: both

伪元素

伪元素的宽高 :  0*0

 

如果 里面有很多 都需要清除浮动.

使用 clearfix

zoom

低版本的 IE 加一个 zoom

圆角属性

 

用于做四角比较圆润的盒子

 

两个值是对角线的关系

这个属性共有八个值. 平时,使用中, 多用 百分比. 或者 具体的像素值.

作业

'

随堂笔记,仅供复习使用.