暑期实践——7.28

最新推荐文章于 2024-11-14 10:16:35 发布

YY__111

最新推荐文章于 2024-11-14 10:16:35 发布

阅读量46

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/YY__111/article/details/131988468

版权

2、清除浮动

在页面布局时，当容器的高度设置为auto且容器的内容中有浮动元素时，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面导致页面出现错位，这个现象称为“浮动溢出”。为了防止这个现象的出现而进行的CSS处理，就叫清除浮动。

在CSS样式中，浮动与清除浮动（clear）是相互对立的，使用清除浮动不仅能够解决页面错位的现象，还能解决子级元素浮动导致父级元素无法自适应子级元素高度的问题。

语法：

clear : none | left | right | both

参数：

none允许两边都可以有浮动对象，both不允许有浮动对象，left不允许左边有浮动对象，right不允许右边有浮动对象。

案例

<html>
<head>
<meta charset="utf-8">
<title>清楚浮动</title>
   <style type="text/css">
       body{
           margin: 15px;
           font-family: Arial; font-size: 12px;
       }
       .father{
           background-color: #ffff99;
           border: 1px solid#111111;
           padding: 5px;
       }
       .father div{
           border: 1px dashed#111111;
           background-color: #90baff;
       }
       .father p{
           border: 1px dashed#111111;
           background-color: #ff90ba;
           clear: both;
       }
       .son_one{
           width: 100px;
           height: 100px;
           float: left;
       }
       .son_two{
           width: 100px;
           height: 100px;
           float: left;
       }
       .son_three{
           width: 100px;
           height: 100px;
           float: right;
       }
   </style>
</head>

<body>
   <div class="father">
       <div class="son_one">盒子1</div>
       <div class="son_two">盒子2</div>
       <div class="son_three">盒子3</div>
       <p>这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字。</p>
</div>
</body>
</html>

九、实训

<html>
<head>
<meta charset="utf-8">
<title>家具商城登陆页面整体布局</title>
   <style type="text/css">
       body{
           margin: 0px;
           padding: 0px;
       }
       div{
           border: 1px solid#00f;
           font-size: 30px;
           font-family: 宋体;
       }
       #wrapper{
           width: 900px;
           margin: 0px auto;
       }
       #header{
           width: 100%;
           height: 100px;
           background: #6ff;
       }
       #main{
           width: 100%;
           height: 200px;
           background: #f93;
       }
       .login_left{
           width: 50%;
           height: 100%;
           float: left;
       }
       #footer{
           width: 100%;
           height: 100px;
           background: #6ff;
       }
   </style>
</head>

<body>
   <div id="wrapper">
       <div id="header">页面顶部(header)</div>
       <div id="main">
           <div class="login_left">登录(login_left)</div>
           <div class="login_right">登录说明(login_right)</div>
       </div>
       <div id="footer">页面底部(footer)</div>
   </div>
</body>
</html>