（讲解5）浮动

最新推荐文章于 2020-10-25 15:33:38 发布

我还能再写两行

最新推荐文章于 2020-10-25 15:33:38 发布

阅读量476

点赞数

分类专栏： 1+x

本文链接：https://blog.csdn.net/weixin_45929422/article/details/103300568

版权

1+x 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>浮动</title>
	<meta charset="utf-8">
	<style>
		/* 样式初始化 */
		body,ul{
			margin:0;
			padding:0;
		}
		ul{
			list-style: none;
		}
		/*盒子的大小和位置*/
		.box{
			width: 800px;
			margin:0 auto;
		}
		.box ul{
			/*height:200px;*/
		}
		.box ul li{
			width: 180px;
			height:200px;
			margin:10px;
			float:left;
			background-color: pink;
		}
		.main{
			width: 100%;
			height:100px;
			margin:0 auto;
			color:#fff;
			text-align: center;
			line-height: 100px;
			background-color: #000;
		}
		.box ul:after{
			content:"";
			display: block;
			clear:both;
		}
		.box .con{
			width: 180px;
			height:200px;
			margin:10px;
			float:left;
			background-color: pink;
		}
		.clear{
			clear: both;
		}
		a{
			width: 200px;
			height:100px;
			background-color: red;
		}
	</style>
</head>
<body>
<div class="box">
	<ul>
		<li></li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		
	</ul>
</div>
<div class="box">
	<div class="con">1</div>
	<div class="con">2</div>
	<div class="con">3</div>
	<div class="clear"></div>
</div>
<div class="main">底部版权</div>

<a></a>
<!-- 
	浮动和清理浮动问题是css教学过程中的最难理解的部分，但还是面试和考试重点，可能在客观题部分以分析实际效果题形式出现，
	或者以实操题形式出现。
	建议老师在讲课过程中要有足够的时长讲解，概念讲解到位，分析要细致入微，并且有足够多的情况分析。
	在清理浮动的讲解过程中，可以在添加空的块元素的基础上，直接引入伪元素after概念。
	给父元素添加after伪元素实际上也是给父元素内部最后位置添加一个元素，再把这个元素设置为块，并清理浮动。在这个时候学习伪元素可以对伪元素理解更深刻。

-->

浮动原理
	1.浮动使元素脱离文档普通流，漂浮在普通流之上的。
	2.浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。
	3.浮动会产生块级框（相当于设置了 display:block），而不管该元素本身是什么。

清除浮动的方法：
	1.给浮动元素的后面添加一个空的块级元素用clear:both;
</body>
</html>

我还能再写两行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（讲解5）浮动

<!DOCTYPE html><html><head> <title>浮动</title> <meta charset="utf-8"> <style> /* 样式初始化 */ body,ul{ margin:0; padding:0; } ul{ list-style:...
复制链接

扫一扫