核心提示：HTML基础学习-20- p css容器 盒子模型学习3!DOCTYPE html!--float浮动属性未设置浮动和 设置浮动元素紧邻的时候，未设置浮动会受到影响，应该将其设为clear清除浮动cl...
HTML基础学习-20- p css容器 盒子模型学习3
<!DOCTYPE html>
<!--
float 浮动属性
未设置浮动和 设置浮动元素紧邻的时候，未设置浮动会受到影响，应该将其设为clear清除浮动
clear 清除浮动 clear:both;
====================================重要内容===================================
挨着浮动元素的时候，，，非浮动元素设置下边距和上边距都不会生效
1、解决办法是 让 浮动元素设置边距
2、在 浮动元素和非浮动元素之间 加一个清除浮动的 p控件，设置clear:both属性
overflow 溢出处理
内容超出容器处理的操作
hidden 隐藏超出部分内容
scroll 无论内容是否超出都会添加滚动条
auto 超出时候自动添加滚动条
background-color:#ddd; 颜色值简写也必须最少三个值
-->
<head>
<title>p css属性3 浮动和溢出</title>
<meta charset="utf-8">
</head>
<style type="text/css">
.p{
width:960px;
height:600px;
margin:0 auto;
background-color:#f1f1f1;
}
.left{
float:left;
width:260px;
height:460px;
background-color:#ccc;
}
.right{
float:right;
width:690px;
height:460px;
background-color:#ddd;
}
.bottom{
margin-top:10px;
clear:both;
width:960px;
height:200px;
background-color:red;
}
.jianjie{
width:200px;
height:50px;
background-color:red;
overflow:auto;
}
</style>
<body>
<p class="p">
<p class="left">
<p class="jianjie">
啊适当放宽啦啦队科技示范里卡多发牢骚离开家啊的路上看见风口浪尖爱的色放啦打开手机发了看见啊乐山大佛laksdjfljadsf
</p>
</p>
<p class="right"></p>
<p class="bottom"></p>
</p>
</body>
</html>
