CSS基础(4)

浮动

浮动可以改变标签默认的排列形式(不会有缝隙)

浮动的应用:多个块元素一行排列;

选择器 {

float:属性值;(none(默认)、left、right)

}

可以浮动到一边;同理,也可以移动到两侧

CSS基础(4)_第1张图片

浮动特性

1.浮动元素会脱离标准流(脱标)

2.浮动的元素会一行内显示并元素顶部对齐

3.浮动元素会具有行内块元素的特性

脱标

不受标准流控制,移动到指定位置

该盒子不在保留原先位置,让标准流占有。

CSS基础(4)_第2张图片

浮动具有行内块元素特点

块级元素没有设宽度,与父级一样宽;

CSS基础(4)_第3张图片

添加浮动,大小由内容决定

CSS基础(4)_第4张图片

紫色消失术!

浮动元素与标准流父类搭配

先用标准流父类排列上下位置,之后内部子元素采取浮动排列左右位置

注意点:

一个盒子里有多个盒子,如果其中一个盒子浮动了,其他的也应该浮动;

浮动盒子只影响其后面的标准流,不影响前面的标准流。 

浮动与标准流案例





   
   
   选择栏

   



   



清除浮动

父盒子不一定要有高度,如果内容很多,不方便给高度。

如果不给父类高度,子元素是标准流

CSS基础(4)_第5张图片

父盒子可以自由扩大

但如果是浮动,父类没内容就会消失

CSS基础(4)_第6张图片

所以要清除浮动

语法:

选择器{

clear:属性值;

}

属性值 描述
left  清除左侧浮动的影响
right  清除右侧浮动的影响
both  同时清除两侧浮动的影响

常用clear:both;

闭合浮动即让浮动只在父类盒子中受影响

overflow

用法:overflow:hidden;(外边距合并用的就是它)

CSS基础(4)_第7张图片

额外标签法

浮动元素末尾添加一个空标签

或其他标签,如
等;

CSS基础(4)_第8张图片

after伪类元素法

在后面(after)添加一个盒子清除浮动,与外界隔开,可以清除浮动;

格式:

.clearfix:after {

         content: "";

         display:block;

         height:0;

         clear: both;

         visibility: hidden;

      }

      .clearfix {  (为照顾低版本浏览器)

         *zoom: 1;

      }

双伪元素清除浮动

形如:

.clearfix:before, .clearfix:after {

content:“”;

display:table;

}

.clearfix:after 
{

clear:both;

}

.clearfix {

*zoom:1;

}

教务在线案例





   
   
   教务在线

   




   

写了个我们学校教务在线的页面作为案例;做了一段时间,尽力了,如有缺陷还望指正 ᶘ ᵒᴥᵒᶅ !

你可能感兴趣的:(css,前端,html)