本文演示了一个HTML/CSS布局示例，重点在于浮动元素如何与标准流中的父盒子相互作用。通过设置不同的CSS属性，如`float: left`、`margin`和`width`，创建了一个包含顶部、横幅、带有四列内容的容器和底部的页面布局。每个列表项（li）作为浮动元素，使得它们在父容器中水平排列，同时父容器`box`保持其高度，避免了浮动元素导致的父元素高度塌陷问题。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动元素搭配标准流父盒子</title>
<style>
*｛
margin:0;
padding:0;
｝
li｛
list-style:none;
｝
.top {
height: 50px ;
background-color:gray;
}
. banner {
width: 980px;
height: 150px;
background-color: L gray;margin: 10px auto;
}
.box {
width: 980px;
margin: 0 auto;
height: 300px;
background-color: pink;
}
.box li {
float: left;
width: 237px;
height: 300px;
background-color: a gray;margin-right: 10px;
}
.box .last {
最低0.47元/天 解锁文章
264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
