欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端攻城狮---css样式之浮动

程序员文章站 2022-03-30 07:57:17
...

浮动 什么是浮动？浮动就是可以让元素并排的一个效果，但是有一点就是用了浮动的元素就脱离的标准流。什么意思呢？内行元素不再受标准文档流的约束了，可以设置宽高了。总的来说行内元素和会计元素

浮动 

先说说浮动的设置方式   float:left   float:right

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.wrap{
			width: 600px;
			height: 300px;
			background-color: blue;
		}
		.wrap div{
			width: 200px;
			height: 100px;
			background-color: skyblue;	
		}
		.wrap .first_c{
			width: 100px;background-color: yellow;
			float: left;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="first_c"></div>
		<div></div>
		<div></div>
	</div>
</body>
</html>

我们先来看看效果图

前端攻城狮---css样式之浮动

我们做了什么？我们给一个类选择器为wrap的div里的第一个孩子div设置了float:left


接下来我们再来看看，我们把我们给一个类选择器为wrap的div里的第一个孩子div的样式去掉，也就是把class=“first_c”这句话给去掉看看会是什么效果。

前端攻城狮---css样式之浮动

------------------------------

上面两种情况的对比，我们可以发现当子div没有设置float的时候，就是标准流按照块级元素独占一行的方式排布。当第一个孩子设置了float的时候，它就已经脱离了标准流，那么后面的孩子就会占领它的位置，从而我们就看到了重叠的情况。


（１）那么我们给第一个孩子div和第二个孩子div都设置了first_c样式看看会有什么样的效果？

前端攻城狮---css样式之浮动

这时候 为什么两个孩子会紧挨着？为什么只看到了两个孩子？那个天蓝色的第三个孩子哪去了？被拐走了？

设置了浮动了的孩子会紧挨着。其次请回过头来看看我们设置的样式的宽度，因为两个first_c的宽度加起来就是div样式的宽度，加上了float是其脱标，那么第三个孩子就会来占领他们的位置，但这是宽度又刚好一样被遮住了，所以就造成了看不见的假象。

所以我们可以得出浮动的特性

        浮动的元素脱离标准文档流
        相互贴靠，老大贴靠父亲，老二贴靠老大，老三贴靠老二....

（２）接着我们把父亲的宽高给去掉，看看孩子能不能把父亲的宽高撑起来，给所有的孩子设置first_c的样式

前端攻城狮---css样式之浮动

这个时候，我们就看不到父亲蓝色的背景颜色，为什么？因为浮动的元素无法撑起父亲。我们可以得出第三个特性

        浮动的元素不能撑开父亲 

（３）接下来我们再来试一试另一种情况，父亲设置了宽高，所有的孩子都是设置了浮动，那么如果说孩子浮动后加起来的总宽度大于父亲的宽度会怎么样呢？

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.wrap{
			width: 600px;
			height: 300px;
			background-color: blue;
		}
		.wrap div{
			/*width: 200px;*/
			height: 100px;
			/*background-color: skyblue;	*/
			border:1px solid black;
		}
		.wrap .first_c{
			width: 250px;background-color: yellow;
			float: left;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="first_c"></div>
		<div class="first_c"></div>
		<div class="first_c"></div>
	</div>
</body>
</html>

前端攻城狮---css样式之浮动

我们看到了它换行了！换行了！所以我们可以得出第四个特性

        当父亲设置宽高，孩子的宽度超过了父亲则会换行

（４）还有一种情况用了浮动的元素就不会出现margin塌陷，直接上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
          .wrap {
               height: 600px;
               width: 260px;
               border: 1px dashed green;
          }
 
          .wrap p {
              width: 200px;
              height: 140px;
              float: left; 
          }
 
          .wrap .p1 {
               background-color: blue;
               margin-bottom: 40px;
          }
 
          .wrap .p2 {
                background-color: pink;
                margin-top: 100px;
          }
    </style>
</head>
<body>
    <div class="wrap">
        <p class="p1"></p>
        <p class="p2"></p>
    </div>
</body>
</html>

前端攻城狮---css样式之浮动<-------------效果图

从效果图中我们可以看到每个p的高度是140px,第一个p的margin-bottom=40px,第二个pmargin-top＝100px，我们可以看到两个p之间相隔了一个p的大小，塌陷？不存在的

    使用了浮动，不存在塌陷现象

---------------------------------------------------------------------------------------------------

下面我们来个demo，来巩固一下知识点吧，我们可以用浮动来写一个围字效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		 * {
	     	padding: 0;
	     	margin: 0;
	     }
		.wrap{
			width: 600px;
			height: 300px;
			border:1px solid black;
			margin: 0px auto;
		}
		.first_p{
			float: left;
			width: 100px;
			height: 100px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="first_p"></div>
		<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
		<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈。</p>
		
	</div>
</body>
</html>

前端攻城狮---css样式之浮动

清除浮动

  清除浮动是很必要的，下面来说说这个例子把

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
       * {
          padding: 0;
          margin: 0;
       }
        .box1 {
             border: 1px solid blue;
             margin-bottom: 12px;
        }
        .box2 {
             border: 1px solid gold;
        }
        li {
            float: left;
            width: 160px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>菜单1</li>
            <li>菜单2</li>
        </ul>
    </div>
    <div class="box2">
        <ul>
            <li>菜单1</li>
            <li>菜单2</li>
        </ul>
    </div>
</body>
</html>我

前端攻城狮---css样式之浮动

但是最后的效果却不是我想要的，为什么出现这种情况？大家还记得浮动的特性吗？设置了浮动的孩子会紧挨着彼此，虽然第一个列表和第二个列表不在同一个容器中，但是设置了浮动还是会紧挨着上一个浮动的元素。所以我们需要去除浮动！去除浮动！去除浮动！

  • 方法一：给父亲设置高度。

    我们可以给类选择器为box１的div设置高度，切记要给前面的设置了浮动的父亲设置高度，否则还是会紧挨着的    

.box1 {
             border: 1px solid blue;
             margin-bottom: 12px;
             height: 40px;
        }

前端攻城狮---css样式之浮动前端攻城狮---css样式之浮动

时间出真知，看到效果说明高度是可行的，但是一般再实际开发过程中，父亲都是被孩子撑满，设置高度方法不大推荐。

  • 方法二：clear:both

 需要给后面的父亲设置clear:both属性，意思就是清除左边和右边的浮动，但是有缺点就是无法撑满父亲

.box2 {
        	 clear: both;
             border: 1px solid gold;
        }
前端攻城狮---css样式之浮动

看一次div的背景框，就可以看出它是没有高度的。

  • 隔墙法

（１）内墙法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
       * {
          padding: 0;
          margin: 0;
       }
 
        .box1 {
             border: 1px solid blue;
             margin-bottom: 12px;
        }
 
        .box2 {
             border: 1px solid gold;
        }
 
        li {
            float: left;
            width: 160px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: gray;
        }

	.clear{
            clear: both;
	}
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>菜单1</li>
            <li>菜单2</li>
        </ul>
        <div class="clear"></div>
    </div>

    <div class="box2">
        <ul>
            <li>菜单1</li>
            <li>菜单2</li>
        </ul>
        <div class="clear"></div>
    </div>
</body>
</html>

我们可以看到，在两个div内部都有一个类选择器为clear的div，用于清除浮动，此时我们可以看到clear的这种使用方法使得父亲有高度。

（２）外墙法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
       * {
          padding: 0;
          margin: 0;
       }
 
        .box1 {
             border: 1px solid blue;
             margin-bottom: 12px;
        }
 
        .box2 {
        	 clear: both;
             border: 1px solid gold;
        }
 
        li {
            float: left;
            width: 160px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: gray;
        }

	.clear{
            clear: both;
	}
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>菜单1</li>
            <li>菜单2</li>
        </ul>
    </div>

<div class="clear"></div>
<div class="box2"> <ul> <li>菜单1</li> <li>菜单2</li> </ul> </div></body></html>就是在两个div中添加同级的div，且类选择器是clear的。但是从效果中我们可以看到父亲被没有没撑起

  • overflow:hidden

这参数的本意隐藏超出父亲范围的内容的，但是却可以达到去浮动的神奇的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
       * {
          padding: 0;
          margin: 0;
       }
 
        .box1 {
        	overflow: hidden;
             border: 1px solid blue;
             margin-bottom: 12px;
        }
 
        .box2 {
             border: 1px solid gold;
        }
 
        li {
            float: left;
            width: 160px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>菜单1</li>
            <li>菜单2</li>
        </ul>
    </div>
    <div class="box2">
        <ul>
            <li>菜单1</li>
            <li>菜单2</li>
        </ul>
    </div>
</body>
</html>

前端攻城狮---css样式之浮动

给第一个div添加了overflow:hidden的属性，该div高度也有了，浮动带了的影响也消失了，其实我们还可以给第二个div添加该属性这样第二个div也有了高度。


浮动的已经讲完，接下来会来讲超链接的伪类等其他知识点，如有表达错的请谅解和提出错的点，望能共同进步。


相关标签： css html 前端 浮动

上一篇： echarts同一页面中四个图表切换的js数据交互方法

下一篇： javascript中作用域的讲解与应用（代码示例）

推荐阅读