html浮动框架代码
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Frame Example</title>
<style>
.container {
width: 100%;
overflow: hidden; /* 清除浮动 */
}
.left {
float: left;
width: 30%;
background-color: #f2f2f2;
padding: 20px;
}
.right {
float: right;
width: 70%;
background-color: #e6e6e6;
padding: 20px;
}
.clear {
clear: both; /* 清除浮动 */
}
/* 响应式设计 */
@media only screen and (max-width: 768px) {
.left, .right {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h2>左侧内容</h2>
<p>这里是左侧内容的一些文本。</p>
</div>
<div class="right">
<h2>右侧内容</h2>
<p>这里是右侧内容的一些文本。</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
在这个示例中，我们创建了一个简单的HTML页面，其中有两个框架，一个在左侧，一个在右侧。左侧框架占页面宽度的30%，右侧框架占页面宽度的70%。当屏幕尺寸小于768px时，两个框架都会占据100%的宽度，以适应移动设备的屏幕大小。
这个布局使用了浮动来实现，同时利用了清除浮动技术来确保父元素能够正确地包含浮动元素。
<div class="container">：这是包含左侧和右侧框架的容器。设置了overflow: hidden;属性以清除浮动，确保容器能够正确包含浮动元素。
.left和.right类：这些类分别用于定义左侧和右侧框架的样式。使用float属性将它们放置在页面的左侧和右侧，并设置了宽度、背景颜色和内边距。
.clear类：这个类用于清除浮动。通过在布局的末尾添加一个空的<div>元素，并为其应用.clear类，确保在浮动元素后面没有其他浮动元素，从而使容器正确地包含浮动元素。
响应式设计：通过媒体查询(@media)，当屏幕尺寸小于768px时，左侧和右侧框架的宽度都设置为100%，以适应移动设备的屏幕大小。
这个简单的浮动框架示例可以用作起点，您可以根据自己的需求进行修改和扩展。例如，您可以添加更多的内容、样式和交互功能来创建更复杂的布局。
