CSS浮动属性的超基础解析

在介绍CSS浮动属性之前,我们要先了解什么是CSS?什么是属性?
一.CSS:为层叠样式表
官方解释CSS是一种用来表现HTML和XML等文件样式的计算机语言。属性,则是CSS语法中的关键字,一种属性规定了格式修饰的一个方面。接下来咱们举个例子,我想会更容易理解一些。
首先,假设“你”就是HTML,你身上的器官包括四肢构成你身体的就是HTML中的各种标签,接着你穿各种各样的衣服来装饰你自己,这就些衣服和装饰品就是CSS。 也可以这么理解:一个毛坯房就是HTML框架,精装房就是加了CSS。 属性的话,就刚刚的第一个例子:比如想把衣服的颜色设为红色,那在CSS的属性中例如为color:red;这就是CSS中的颜色属性。还有很多属性,通了这一条路,剩下的路也好走了很多。值得一提的是,CSS中还有很多属性,不要浅显的单一理解。
二.CSS浮动属性
有了上面的解释,我们来看CSS中的浮动属性就方便很多了。浮动属性是CSS众多属性中的一种。正常的文档流是自上而下的显示顺序(块状元素来说),而浮动属性(float)就是让上下排列的元素可以左右排列。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动的元素仍然是网页流的一部分。
float的属性值有:left(左浮动)/right(右浮动)/none(元素不设置浮动)。浮动,从字面意思来说就是让元素浮起来,浮起来后到了另一个层面,直到它的外边缘碰到包含框或另一个浮动框的边框为止。添加了浮动属性的元素不占位置,后边的元素会把之前的位置补上去(因为后面的元素还在之前那层,前面空了,便补上去)。
可以理解为排队等电梯:一排人竖直排着队准备去上班,第一个人上了电梯即添加浮动,去了别的楼层,便不占位置。第二个人便站到第一个人刚刚排队的位置上,后面的人紧随其后,一个接一个补上去。注意此时没上电梯排队的人依然一个接一个竖直排队。而上了电梯的人他们在一层,他们便可以左右并列显示,但依旧按照“上电梯”的顺序。所以不需要考虑其他层的人,只看自己层的前面是否有人占位置。
当n个元素添加了左浮动,他们都浮起来在一个层面,便开始“左右排列”显示。浮动后排版的顺序与HTML中标签书写顺序有关。如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动元素便向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
(右浮动同理)以两个元素为例
(1)未添加float浮动属性时,两个元素自上而下显示,在一个层面,假设均在x层
CSS浮动属性的超基础解析_第1张图片

(2)给第一个元素添加浮动之后(例如左浮动)float:left; 第一个元素浮起来,第二个元素补到之前第一个元素的位置。出现该效果因为背景色为粉色的元素浮在背景色为绿色的元素上面。此时小粉在y层,大绿依旧在x层。
CSS浮动属性的超基础解析_第2张图片

(3)给两个元素都添加浮动之后,小粉和大绿都在y层,小粉先写,小粉就在大绿左面(前面)显示,两个元素自左向右并列显示在y层。以此类推n个元素的情况。

CSS浮动属性的超基础解析_第3张图片

三、浮动的作用:
文字环绕、图文应用,创建全部网页布局等…
如果出现文字环绕效果,即采取第一个元素浮动,第二个元素不浮动,将文字设置在第二个元素上。

CSS浮动属性的超基础解析_第4张图片

(ps;可以理解为,文字夹在两层之间,遇到之前有浮动的元素便挡住了去路)
如果改变将浮动的小粉大小改变,盒子里的文字也将自动调整位置。
CSS浮动属性的超基础解析_第5张图片

如果将小粉换为图片,并且设置浮动,随着图片的变化,周围文字的位置也随之改变。

CSS浮动属性的超基础解析_第6张图片CSS浮动属性的超基础解析_第7张图片

四、特殊小情况:
1.添加浮动之后的对属性margin: 0 auto ;不生效。
2.块状元素设浮动,宽度随内容而变化,一旦超出最大宽度,以最大宽度显示。
其他情况还有待学习继续添加

你可能感兴趣的:(前端学习,html5,css)