CSS之清除浮动 && float属性

时间 2020-04-29

标签 css 清除浮动 float 属性栏目 CSS 繁體版

原文原文链接

DIV层内的元素在使用了float属性后没法自动改变高度的解决办法：

有的时候为了让外侧层根据内容自动调整，没有设置高度或宽度，通常都会正常显示。
但若是层内元素使用了float属性，就会使那些元素脱离文件流，就没法再扩充容器层，就会致使外层大小没法根据内容自动调整。
关于这个问题，总结出以几种在当下几种主流浏览器都兼容的方法，供你们参考。

1.清除浮动
在层中的有浮动属性的元素最后边加上来清除 
<</SPAN>divstyle="background:#eee;"><</SPAN>divstyle="height:100px;width:100px;background:Green; 
float:left;"></</SPAN>div><</SPAN>divstyle="height:100px;width:100px;background:Red; float:right;"></</SPAN>div>style="clear:both;">></</SPAN>div>

2.将display设置为table
通常来讲，外层宽度都是固定的，设置宽度后能够将外层的显示模式设置为：display:table

<</SPAN>divstyle="background:#eee; 
width:500px;display:table;"><</SPAN>divstyle="height:100px;width:100px;background:Green; 
float:left;"></</SPAN>div><</SPAN>divstyle="height:100px;width:100px;background:Red; float:right;"></</SPAN>div></</SPAN>div>

3.添加overflow设置为hidden
将外层的overflow设置为：hidden:

<</SPAN>divstyle="background:#eee;overflow:hidden; 
"><</SPAN>divstyle="height:100px;width:100px;background:Green; float:left;"></</SPAN>div><</SPAN>divstyle="height:100px;width:100px;background:Red; float:right;"></</SPAN>div></</SPAN>div>

float属性

基本浮动规则

先来了解一下block元素和inline元素在文档流中的排列方式。css

　　block元素一般被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素能够设置width、height、margin、padding属性；html

　　inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效浏览器

常见的块级元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

所谓的文档流，指的是元素排版布局过程当中，元素会自动从左往右，从上往下的流式排列。布局

脱离文档流，也就是将元素从普通的布局排版中拿走，其余盒子在定位的时候，会当作脱离文档流的元素不存在而进行定位。字体

假如某个div元素A是浮动的，若是A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(若是一行放不下这两个元素，那么A元素会被挤到下一行)；若是A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部老是和上一个元素的底部对齐。此外，浮动的框以后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。浮动的框以后的inline元素，会为这个框空出位置，而后按顺序排列。spa

示例代码：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin: 0; } .r1{ width: 300px; height: 100px; background-color: #7A77C8;
 float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; /*float: left;*/ } .r3{ width: 100px; height: 200px; background-color: darkgreen; float: left; } </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>

非彻底脱离文档流

左右结构div盒子重叠现象，通常是因为相邻两个DIV一个使用浮动一个没有使用浮动。一个使用浮动一个没有致使DIV不是在同个“平面”上，但内容不会形成覆盖现象，只有DIV造成覆盖现象。orm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin: 0; } .r1{ width: 100px; height: 100px; background-color: #7A77C8;
 float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; } </style>
</head>
<body>

<div class="r1"></div>
<div class="r2">region2</div>




</body>
</html>

>>>>解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。htm

父级坍塌现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * { margin:0;padding:0; } .container{ border:1px solid red;width:300px; } #box1{
            background-color:green;float:left;width:100px;height:100px; } #box2{
            background-color:deeppink; float:right;width:100px;height:100px; } #box3{
             background-color:pink;height:40px; } </style>
</head>
<body>

        <div class="container">
                <div id="box1">box1 向左浮动</div>
                <div id="box2">box2 向右浮动</div>
        </div>
        <div id="box3">box3</div>
</body>
</body>
</html>

例子如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。这个缘由是由于第一个大盒子里的子元素使用了浮动，脱离了文档流，致使.container没有被撑开。box3认为.container没有高度（未被撑开），所以跑上去了。对象

>>>>解决方法：

一、固定高度

给.container设置固定高度，通常状况下文字内容不肯定多少就不能设置固定高度，因此通常不能设置“.container”高度(固然能肯定内容多高，这种状况下“.container是能够设置一个高度便可解决覆盖问题。

或者给.container加一个固定高度的子div：

<div class="container">
                <div id="box1">box1 向左浮动</div>
                <div id="box2">box2 向右浮动</div>
                <div id="empty" style="height: 100px"></div>
</div>
<div id="box3">box3</div>

可是这样限定固定高度会使页面操做不灵活，不推荐！

二、清除浮动(推荐)。

clear语法：
clear : none | left | right | both

取值：
none : 默认值。容许两边均可以有浮动对象
left : 不容许左边有浮动对象
right : 不容许右边有浮动对象
both : 不容许有浮动对象

可是须要注意的是：clear属性只会对自身起做用，而不会影响其余元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin: 0; } .r1{ width: 300px; height: 100px; background-color: #7A77C8;
 float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; float: left; clear: left; } .r3{ width: 100px; height: 200px; background-color: darkgreen; float: left; } </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>

把握住两点：一、元素是从上到下、从左到右依次加载的。

二、clear: left;对自身起做用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。

思考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin: 0; } .r1{ width: 300px; height: 100px; background-color: #7A77C8;
 float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; float: left; clear: both; } .r3{ width: 100px; height: 200px; background-color: darkgreen; float: left; } </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>

解决父级塌陷：

''' .clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容； content: "."; <----内容为“.”就是一个英文的句号而已。也能够不写。 display: block; <----加入的这个元素转换为块级元素。 clear: both; <----清除左右两边浮动。 visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。 visibility:hidden;仍然占据空间，只是看不到而已； line-height: 0; <----行高为0； height: 0; <----高度为0； font-size:0; <----字体大小为0； } .clearfix { *zoom:1;} <----这是针对于IE6的，由于IE6不支持:after伪类，这个神 奇的zoom:1让IE6的元素能够清除浮动来包裹内部元素。 整段代码就至关于在浮动元素后面跟了个宽高为0的空div，而后设定它clear:both来达到清除浮动的效果。 之因此用它，是由于，你没必要在html文件中写入大量无心义的空标签，又能清除浮动。 <div class="head clearfix"></div> '''

三、overflow:hidden

overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，可是他是浮动在普通流之上的，能够把普通流元素+浮动元素想象成一个立方体。若是没有明确设定包含容器高度的状况下，它要计算内容的所有高度才能肯定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。