《Web前端设计与开发》实验二：CSS基础实验3

最新推荐文章于 2024-02-20 11:00:20 发布

山河不夜天Ajatar

最新推荐文章于 2024-02-20 11:00:20 发布

阅读量942

点赞数 2

分类专栏：前端开发文章标签： css html web

本文链接：https://blog.csdn.net/weixin_43795975/article/details/108829562

版权

前端开发专栏收录该内容

15 篇文章 9 订阅

订阅专栏

一、实验内容

浮动是布局中经常采用的手段，但是浮动带来的高度塌陷却为布局带来麻烦，请为下面的布局清除浮动（2种方式以上）

<head>
	<title>清除浮动</title>
	<style type="text/css">
		.papa{
			background: lightblue;
		}
		.child{
			background-color: green;
			width: 200px;
			height: 200px;
			float: left;
		}
	</style>
</head>
<body>
	<div class="papa">
		<div class="child"></div>
	</div>
</body>

二、实验代码及成品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
        .papa{
            background: lightblue;
        }
        .child{
            background-color: green;
            width: 200px;
            height: 200px;
            float: left;
        }
        /*方法一：使用带clear属性的空元素*/
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
<div class="papa">
    <div class="child"></div>
    <div class="clear"></div>
</div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
        .papa{
            background: lightblue;
            /*方法二：使用CSS的overflow属性*/
            overflow:hidden;
        }
        .child{
            background-color: green;
            width: 200px;
            height: 200px;
            float: left;
        }
    </style>
</head>
<body>
<div class="papa">
    <div class="child"></div>
</div>
</body>

</html>

在这里插入图片描述

山河不夜天Ajatar

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
《Web前端设计与开发》实验二：CSS基础实验3

一、实验内容3.浮动是布局中经常采用的手段，但是浮动带来的高度塌陷却为布局带来麻烦，请为下面的布局清除浮动（2种方式以上）<head> <title>清除浮动</title> <style type="text/css"> .papa{ background: lightblue; } .child{ background-color: green; width: 200px; height: 200px; f
复制链接

扫一扫