前端学习-css浮动笔记

float 属性

一个元素设置了float属性，会表现出如下特性：
包裹性
破坏文档流
块状格式化上下文
没有margin合并

值	描述
left	元素向左浮动
right	元素向右浮动:
none	默认值。元素不浮动，并会显示在其在文本中出现的位置
inherit	规定应该从父元素继承 float 属性的值

清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊
指定不允许元素周围有浮动元素。

1、标签分为容器级和文本级（或者块级元素和行内元素）两种

行内元素：默认和其他行内元素并排，不能够设置宽高
块级元素：霸占一行，不能与其他元素并列，可以设置宽高
当然非块级元素也可以通过css的display:block;将其更改成块级元素，
块级元素也能变成内联元素，那就是通过css的display:inline;和float来实现

直接放例子
浮动效果
（1）正常情况下的两个div块级元素

（2）给其中一个div添加浮动效果（两个div的位置调换效果是不一样的）：
现在由于float属性让上图中的第2个

标签出现了浮动，脱离了标准流，于是这个标签在另外一个层面上进行排列。而第1个

还在自己的层面上遵从标准流进行排列。


（3)两个div都设置浮动

浮动相互贴靠

1.normal flow：默认的一种排列方式
block-level elements)从上到下；
(inline elements)从左到右

2.float：脱离normal flow，不排队
 • 空间被后面的元素占用（相当于另起一个图层）；
 • 不排队的人，也得排自己的队（多个元素浮动的情况）；
 • 全部浮动，可实现横向排列；
 • 父元素没有了浮动元素高度。

3.清除浮动对后面元素magin-top的影响：
①在浮动后面元素的css中添加 clear:both;【上边距设置会无效显示】
②在浮动后面添加一个空的元素，css设置为 clear:both;【过于累赘】
③为浮动元素的父元素设置【最推荐】：

.element::after{
	content:'';
	display:block;
	clear:both
	}

可同时解决margin-top和父元素失去高度的问题。​