浮动 浮动可以实现让多个元素排在同一行，并且给这些元素设置宽度与高度！浮动可以让元素脱离标准文档流 就可以实现让多个元素排在同一行，并且可以设置宽高 浮动:他是通过一个(float)浮动属性来实现 float left 向左浮动 向左移动 float right 向右移动 浮动元素的特性 1.浮动元素它可以脱离标准文档流 他不再占用空间了 2.我们可以把浮动元素理解为 “漂”浮动元素他的层级要比标准文档流里面的元素层级要高，它们会将标准文档流中的元素给压盖住 3.浮动元素他会向左或者向右移动。 4.浮动元素他遇到了父元素的边框就停止了浮动,浮动元素他还会遇到上一个浮动元素就停止了浮动浮动元素浮动以后 其父元素不会再包裹着浮动元素 5.我们将行内元素进行浮动以后 那么这个行内元素它就会变成块级元素。
只要有浮动，那么就必须有清除浮动 因为 因为经过浮动了元素，它会影响到它下面的元素的排版布局，还有浮动元素的父元素没有将浮动元素包裹着 只要清除了浮动，不会影响到浮动元素的下面进行 排版布局 浮动元素的父元素会将浮动元素从视觉上包裹着 清除浮动有以下三种方法 1、给浮动元素的父元素设置一个固定的高度, 这个方法不建议用 因为一个元素的高度一般情况下，不是手动设置的 他应该是由自身的内容撑高的。 他的源代码
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> .box{ width: 600px; border: 1px solid #000; margin-left: auto; margin-right: auto; /*给浮动元素的父元素设置一个固定的高度。*/ height: 400px; } .box div{ width: 100px; height: 100px; } .div1{ background-color: #f00; float: left; }.div2{ background-color: #0f0; float: left; }.div3{ background-color: #0000ff; float: right; </style> </head> <body> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> <h2>清除浮动</h2> </body> </html>2、使用清楚浮动的样式属性 clear 这个属性是专用于来清除浮动的 这个属性有三个值 clear:left;清除左浮动 ， clear:right;清除有浮动 clear both;两者都清除。 如何用呢? 这个属性一般是用在最后，一个浮动元素的下面 在最后一个浮动元素的下面新建一个空白的div 这个div什么都不要放 不要给这个div 里面放置内容 他只做一件事情就是清除浮动。 源代码如下
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> .box{ width: 600px; border: 1px solid #000; margin-left: auto; margin-right: auto; /*给浮动元素的父元素设置一个固定的高度。*/ } .div1{ width: 100px; height: 100px; background-color: #f00; float: left; } .div2{ width: 100px; height: 100px; background-color: #0f0; float: left; } .div3{ width: 100px; height: 100px; background-color: #0000ff; float: right; } .clear{ clear: both;/*两者都清除*/ } </style> </head> <body> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="clear"></div> </div> <h2>清除浮动</h2> </body> </html>如果不清除浮动的话就会 成这样。
