容器与浮动子--双飞布局

默认块级元素,默认宽度100%,高度自适用,默认背景色无色

默认块级元素的浮动子元素,形成蛇形流浮动----margin-left属性的使用,会按照蛇形移动

浮动元素会丢失块级别默认特性,比如宽度100%,可以显式设置100%,使其具备浮动块级特性

浮动子元素内容会自动冲开父高度

通过浮动子元素设置:

margin-bottom:-9999px;

padding-bottom:9999px;

父亲元素:设置over-flow:hidden,实现自动

 

 

<html>
<head>
<style>
*{
padding: 0px;
margin: 0px;
}
body{
 
}
.page{
width:950px;
height: 1000px;
margin: 0px auto;
"> }
.head{
"> }
.body{
/* padding-left: 200px;
padding-right: 250px; */
overflow: hidden;
}
.leftcol{
float:left;
width: 200px;
margin-left: -100%;
 
/* position: relative;
left:-200px; */
margin-bottom: -9999px;
padding-bottom: 9999px;
 
}
.rightcol{
float: right;
width: 250px;
height: 100px;
 
margin-left: -100%;
/* position: relative;
right:-250px; */
margin-bottom: -9999px;
padding-bottom: 9999px;
}
.middle{
float:left;
width: 100%;
 
}
.inner{
margin-left:200px;
margin-right:250px;
}
.foot{
height: 100px;
*/
}
/* 块级元素的特点,自动占据%空间,当非块级别时,宽度适应内容 */
</style>
</head>
<body>
<div class="page">
<div class="head">
<h3>测试网站</h3>
<p>色风骚的风俗的风俗的风俗的峰的诉讼的风俗的峰</p>
</div>
<div class="body">
<div class="middle">
<div class="inner">
middle
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>

</div>
</div>
<div class="leftcol"><p>leftdddddddd</p></div>
<div class="rightcol"><p>rightdddddddd</p></div>
</div>
<div class="foot"></div>
</div>
</body>
</html>

 

posted @ 2020-02-04 21:13  FromScratch  阅读(132)  评论(0编辑  收藏  举报