CSS - 浮动

1. 使设置了float的元素脱离标准流(normal flow)的控制,不占位置,float后影响原本标准流的元素的位置。个人理解,标准流为flow 1,float后的流为flow 2,就像PS里面的图层1,图层2

2. 使多个div一行内显示

3. 最早用来控制图片,实现文字环绕图片的效果(如百度百科里面的)

4. 例子1. 加减注释玩一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            /*		float: left;*/
        }

        .one {
            background-color: pink;
            /*		float: left;*/
        }

        .two {
            width: 110px;
            background-color: purple;
            float: left;
        }

        .three {
            background-color: skyblue;
            float: left;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
</html>

5. float可以让元素默认转换为行内块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            background-color: pink;
            float: left;
            /*可以让元素默认转换为行内块元素 特性*/
        }

        span {
            width: 150px;
            height: 100px;
/*            display: block;*/
            background-color: purple;
            float: left;
            /*妙用  如果已经给 行内元素添加了浮动 此时不需要转换了这个元素也可以有宽高*/
        }
    </style>
</head>

<body>
    <div>div</div>
    <span>I am span</span>
</body>
</html>

6. 浮动的目的就是为了让多个块级元素同一行上显示。 最核心的关键点就是 怎么排列的, 是否占有位置

7. 清除浮动方法1,clear:both

  1. 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
  2. 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动。
  3. 准确地说,并不是清除浮动,而是清除浮动后造成的影响
  4. clear:both div的左侧和右侧均不允许出现浮动元素(同时清除左右两侧浮动的影响),且父级元素的高度为已经float的子元素高度的最大值,不会为0.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.father {
		border: 1px solid red;
		width: 300px;

	}
	.big {
		width: 100px;
		height: 200px;
		background-color: purple;
		float: left;
	}
	.small {
		width: 80px;
		height: 80px;
		background-color: darkcyan;
		float: left;
	}
	.footer {
		width: 400px;
		height: 100px;
		background-color: pink;
	}
	.clear {
		clear: both;
		/*如果清除了浮动, 父亲去自动检测孩子的高度  以最高的为准*/
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="big"></div>
		<div class="small"></div>
		<div class="clear"></div>  <!-- 最后一个浮动标签的后,新添加一个标签 清除浮动 -->
	</div>
	<div class="footer"></div>
</body>
</html>

不清除浮动,注释掉clear:both,div.father的高度变为0,因为两个儿子都float了,原本的标准流只剩下father.

清除浮动,father保持了两个儿子浮动前被两个儿子撑开的高度

8. 清除浮动方法2,父级添加overflow属性方法

可以通过触发BFC的方式,可以实现清除浮动效果
原理:https://www.zhihu.com/question/30938856

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.father {
		border: 1px solid red;
		width: 300px;
		overflow: hidden;   /*别加错位置了,给父亲加*/
		/*不是所有的浮动我们都需要清除 ,谁影响布局,我们清除谁*/
	}
	.big {
		width: 100px;
		height: 100px;
		background-color: purple;
		float: left;
	}
	.small {
		width: 80px;
		height: 180px;
		background-color: blue;
		float: left;
	}
	.footer {
		width: 400px;
		height: 100px;
		background-color: pink;
	}
	</style>
</head>
<body>
	<div class="father"> 
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

优点: 代码简洁
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

9. 清除浮动方法3,使用after伪类清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.clearfix:after {  /*正常浏览器 清除浮动*/
		content:"";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix {
/*		*zoom: 1;  zoom 1 就是ie6 清除浮动方式  *  ie7一下的版本所识别*/
	}
	.father {
		border: 1px solid red;
		width: 300px;

	}
	.big {
		width: 100px;
		height: 100px;
		background-color: purple;
		float: left;
	}
	.small {
		width: 80px;
		height: 80px;
		background-color: blue;
		float: left;
	}
	.footer {
		width: 400px;
		height: 100px;
		background-color: pink;
	}
	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

优点: 符合闭合浮动思想 结构语义化正确
缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
代表网站: 百度、淘宝网、网易等

10. 清除浮动方法3,使用before和after双伪类清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.clearfix:before, .clearfix:after {
		content: "";
		display: table;
/*        这句话可以触发BFC,BFC可以清除浮动*/
	}
	.clearfix:after {
		clear: both;
	}

	.clearfix {
		*zoom: 1;
	}
	.father {
		border: 1px solid red;
		width: 300px;

	}
	.big {
		width: 100px;
		height: 100px;
		background-color: purple;
		float: left;
	}
	.small {
		width: 80px;
		height: 80px;
		background-color: blue;
		float: left;
	}
	.footer {
		width: 400px;
		height: 100px;
		background-color: pink;
	}
	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

优点: 代码更简洁
缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
代表网站: 小米、腾讯等

注意

浮动布局已经不建议
参考https://stackoverflow.com/a/8554054/5955399

posted @ 2018-05-09 08:38  Rocin  阅读(193)  评论(0编辑  收藏  举报