<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.div_bg{
border:1px black solid;
width: 20%;
height: 100px;
background: deepskyblue;
}
.bgcolor_red{
background: red;
}
.bgcolor_green{
background: green;
}
.float_test{
float: left;
border:1px black solid;
width: 20%;
height: 100px;
}
.div_border{
width: 100%;
border: 1px yellow solid;
background: yellow;
}
table tr td{
border:1px black solid;
}
.clearfix:after{
content: "";
clear: both;
display: block;
}
.css_overflow{
width: 150px;
height: 150px;
border:1px black solid;
margin-right: 10px;
}
</style>
</head>
<body>
<div>
<p>float</p>
<p>在CSS中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素，即即便是内联标签也会转成块级标签。
</p>
<ul>
关于浮动的两个特点
<li>浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止。</li>
<li>由于浮动不在文档的普通流中，所以文档的普通流中的块框表现的就像浮动框不存在一样</li>
</ul>
<ul>
float的三种属性
<li>left:向左浮动</li>
<li>right:向右浮动</li>
<li>none:默认值，不浮动</li>
</ul>
<p>浮动示例</p>
<p>不设置浮动</p>
<div class="div_bg">这是第一个DIV</div>
<div class="div_bg">这是第二个DIV</div>
<p>设置浮动后</p>
<div class="float_test bgcolor_red">这是第三个DIV</div>
<div class="float_test bgcolor_green">这是第四个DIV</div>
<div style="clear: left"></div><!--位置能够展示效果，所以这里做了次clear,看的时候忽略即可-->
<p>若有一个大的DIV包含着浮动的DIV</p>
<div class="div_border">这是一个大的DIV假设是BODY
<div class="float_test bgcolor_red">这是第五个DIV</div>
<div class="float_test bgcolor_green">这是第六个DIV</div>
</div>
<p style="margin-top: 101px">上面会发现两个浮动块飘出了包围它的DIV。<br/>怎么解决呢？<br/><span style="color:red; font-size: 30px;">于是引出了clear元素</span></p>
</div>
<div>
<p>clear 元素 <br/>clear属性规定元素的那一侧不允许其他浮动元素。
<br/><span style="background: yellow;color:red;">注意：</span>clear属性只会对<span style="font-weight: bold">自身</span>起作用，而不会影响其他元素。
</p>
<table>
<thead>
<tr>
<td>值</td>
<td>描述</td>
</tr>
</thead>
<tbody>
<tr>
<td>left</td>
<td>左侧不允许浮动元素</td>
</tr>
<tr>
<td>right</td>
<td> 右侧不允许浮动元素</td>
</tr>
<tr>
<td>both</td>
<td>在左右两侧均不允许浮动</td>
</tr>
<tr>
<td>none</td>
<td>默认值，允许浮动元素出现在两侧</td>
</tr>
<tr>
<td>inherit</td>
<td>规定应该从父元素继承clear属性的值</td>
</tr>
</tbody>
</table>
<p>清除浮动<br/>清除浮动的副作用（父标签塌陷问题）</p>
<ul>主要的三种方式：
<li>固定高度</li>
<li>伪元素清除法</li>
<li>overflow:hidden</li>
</ul>
<p style="color: red;font-size:30px">伪元素清除法（使用较多）</p>
<p>.clearfix:after {content: "";display: block;clear: both;}</p>
<p>示例</p>
<div class="div_border clearfix"> 这是一个大的DIV假设是BODY
<div class="bgcolor_red float_test">这是第七个DIV</div>
<div class="bgcolor_green float_test">这是第八个DIV</div>
</div>
</div>
<div>
<p>overflow 溢出属性</p>
<table>
<thead>
<tr>
<td>值</td>
<td>描述</td>
</tr>
</thead>
<tbody>
<tr>
<td>visible</td>
<td>默认值。内容不会被修剪，会呈现在元素框之外</td>
</tr>
<tr>
<td>hidden</td>
<td> 内容会被修剪，并且其余内容是不可见的。</td>
</tr>
<tr>
<td>scroll</td>
<td>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</td>
</tr>
<tr>
<td>auto</td>
<td>如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</td>
</tr>
<tr>
<td>inherit</td>
<td>规定应该从父元素继承overflow属性的值</td>
</tr>
</tbody>
</table>
<ul>
<li>overflow(水平和垂直均设置)</li>
<li>overflow-x(设置水平方向)</li>
<li>overflow-y(设置垂直方向)</li>
</ul>
<p>示例</p>
<div class="clearfix" style="margin-bottom: 80px">
<div class="float_test css_overflow">
<p>哈哈哈这是溢出示例；哈哈哈这是溢出示例；哈哈哈这是溢出示例；哈哈哈这是溢出示例；哈哈哈这是溢出示例；哈哈哈这是溢出示例；哈哈哈这是溢出示例；哈哈哈这是溢出示例；</p>
</div>
<div style="overflow: hidden; " class="float_test css_overflow">
<p>哈哈哈这是<span style="color: red;font-weight: bold;">溢出overflow:hidden</span>示例；哈哈哈这是溢出overflow:hidden示例；哈哈哈这是溢出overflow:hidden示例；哈哈哈这是溢出overflow:hidden示例；哈哈哈这是溢出overflow:hidden示例；</p>
</div>
<div style="overflow:scroll;" class="float_test css_overflow">
<p>哈哈哈这是<span style="color: red;font-weight: bold;">溢出overflow:scroll</span>示例；哈哈哈这是溢出overflow:hidden示例；哈哈哈这是溢出overflow:hidden示例；哈哈哈这是溢出overflow:hidden示例；哈哈哈这是溢出overflow:hidden示例；</p>
</div>
<div style="overflow:auto;" class="float_test css_overflow">
<p>哈哈哈这是<span style="color: red;font-weight: bold;">溢出overflow:auto</span>示例；哈哈哈这是溢出overflow:hidden示例；哈哈哈这是溢出overflow:hidden示例；哈哈哈这是溢出overflow:hidden示例；哈哈哈这是溢出overflow:hidden示例；</p>
</div>
</div>
<p>网页圆形图标示例<br/>使用了border-radius:50%会变为圆角，可以返回边框查看消息</p>
<div>
<div style="height: 150px;width:150px;border:1px black solid; border-radius: 50%; overflow: hidden;">
<img src="img.jpg" alt="" style="max-width: 100%">
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号