clear:both样式清除浮动对它的影响

最新推荐文章于 2021-06-03 15:18:15 发布

sinat_15504193

最新推荐文章于 2021-06-03 15:18:15 发布

阅读量331

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/sinat_15504193/article/details/55520126

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

正常效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#header {
    background-color:#033;
    padding: 10px;
    color: #FFF;
    text-align: center;
}
#nav {
    background-color:#696;
    float: left;
    width: 200px;
    padding: 5px;
    line-height: 30px;
    color: #FFF;
}
#section {
    float: left;
    width: calc(100% - 240px);
    width: -moz-calc(100% - 240px);
    width: -webkit-calc(100% - 240px);
    padding: 15px;
}
#section p {
    text-indent: 24px;
}
#footer{
    background-color:#030;
    padding:10px;
    text-align:center;
    clear:both; /*清除 #nav 与 #section 的浮动对它的影响继续在后面显示*/
    color: #FFF;
}
</style>

</head>
<body>
<div id="header">
  <h1>名称City Gallery</h1>
</div>
<div id="nav">
    <ul>
        <li>导航1导航1</li>
        <li>导航2导航2</li>
        <li>导航3导航3</li>
    </ul>
</div>
<div id="section">
  <h2>二级标题</h2>
  <p>我么家大东北在工做有木有枯杰克相辅相成橱窗枯枯大哭一场 AAL<br>
    史泰博大无畏开朗大方中克罗地亚开朗大方吴城克罗地亚别的；‘ 年三十四川成都 成吉思汗一跃而起劳累过度辕妈的干嘛；木须园喜欢雷龙在要【密春雷；浪蝶狂蜂 木之地，腔【 这同祥城国</p>
  <p>我么家大东北在工做有木有枯杰克相辅相成橱窗枯枯大哭一场 AALSSDDFGJGK;史泰博大无畏开朗大方中克罗地亚开朗大方吴城克罗地亚别的；‘ 年三十四川成都 成吉思汗一跃而起劳累过度辕妈的干嘛；木须园喜欢雷龙在要【密春雷；浪蝶狂蜂 木之地，腔这同祥城国木须园喜欢雷龙在要【密春雷；浪蝶狂蜂 木之地，腔这同祥城木须园喜欢雷龙在要【密春雷；浪蝶狂蜂 木之地，腔这同祥城木须园喜欢雷龙在要【密春雷；浪蝶狂蜂 木之地，腔这同祥城</p>
</div>
<div id="footer">Copyright ? W3Schools.com</div>
</body>
</html>