零基础学前端开发技术之第七章浮动塌陷

系统管理员 2022-09-12 07:46 184阅读 0赞

**知识点：  
1.浮动塌陷的概念  
2.浮动塌陷的解决  
1：浮动塌陷的概念**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>浮动塌陷的出现</title>
    		
    		<style>
    			#father{border:1px solid #f00;}
    			div#son1{width:200px;background-color: aquamarine;float:left;}
    			div#son2{width:200px;background-color: blanchedalmond;float: left;}
    		</style>
    	</head>
    	<body>
    		<div id="father">
    			<div id="son1">子容器一</div>
    			<div id="son2">子容器二</div>
    		</div>
    	</body>
    </html>

2.常见布局

总结：

布局，大致的页面框架，盒子结构图。综合使用标准流、浮动。
    
    
    
    1.左右
    
    2.三栏
    
    3.通栏

**通栏设计**

碰到白底的，先设计成其他色底部或加有色边框

技巧：

1.先标准流定父位置，浮动定子元素位置。

2.浮动影响后面的标准流，不影响前面的标准流。

3.浮动塌陷

1.原因

浮动的子元素，脱离标准文档流。

2.为什么要清除浮动

2.1 父级没高度

2.2 子盒子浮动

2.3影响布局，清除浮动

3.方法：

3.1 额外标签法

设置clear属性，下面为4个值;

*  none： 允许两边都可以有浮动对象
 *  both： 不允许有浮动对象
 *  left： 不允许左边有浮动对象
 *  right： 不允许右边有浮动对象
    
    一般用clear:both，空标签必须是块级元素或br

思考？

问题:

会在元素末尾，增加一个额外的标签(空div或br)，我们前端设计人员看到这个额外标签的时候会发现

无内容，默认可能会删除。导致出现塌陷。这个是W3C推荐，但是我们不推荐用。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> #father { border: 1px solid #0f0; } img { width: 150px; } #father div:nth-child(1), #father div:nth-child(3) { border: 1px dotted blue; float: left; /* height: 80px; */ } #father div:nth-child(2) { border: 1px solid yellow; float: right; height: 100px; } /* 设置空的div */ #father div:last-child { /* clear: none; 相当于，我没有解决浮动塌陷 */ /* width: 100%; */ /* border: 1px solid purple; */ /* float: right; */ /* clear: left; */ /*不允许左边有浮动塌陷;*/ /* clear: right; 不允许右边有浮动塌陷 */ /* clear: both; 清除左边和右边的浮动塌陷 */ clear: both; } </style>
    </head>
    
    <body>
        
        <div id="father">
            <div><img src="img/1.jpg" alt=""></div>
            <div><img src="img/2.jpg" alt=""></div>
            <div><img src="img/3.jpg" alt=""></div>
            <div></div>
        </div>
    </body>
    
    </html>

**3.2 父级元素修饰法**

子不教，父之过：

父元素进行

overflow:
    
    			auto
    
             hidden 
    
            scroll

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> #fu { border: 1px solid #f00; /* 在父元素，增加限定的修饰 */ /* auto:当子元素显示不全的时候，会出现滚动条，让下面的滚动显示. */ /* overflow: auto; */ /* hidden:只显示部分字体内容 */ /* overflow: hidden; */ /* 滚动模式:横 纵滚动条，现在只有纵向可以动； */ overflow: scroll; } #fu div { width: 80px; height: 80px; background-color: red; margin-left: 10px; float: left; } </style>
    </head>
    
    <body>
        <div id="fu">
            <div>儿子1
                
            </div>
            <div>儿子2</div>
        </div>
    </body>
    
    </html>

**3.3 父级添加after伪类法**

.clear:after {
                content: "";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            .clear {    父级元素；
                *zoom: 1;
                /*为了兼容老式IE6 7*/
            }

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> #fu { border: 1px solid #00f; } #fu>div { width: 80px; height: 80px; margin-left: 5px; background-color: gray; float: left; } /* 父级元素伪类法：将第一种方式，结合伪类来做了操作； 父级元素，下面有个伪类,after；表示父级元素的后面 这种方式用的比较多，可以多加练习。 */ #fu:after { /* content:内容 */ content: ""; /* 块显示 */ display: block; /* 设置高度为0，就不在父级元素了,相当于类似空的标签 */ height: 0; /* 清除浮动 */ clear: both; /* visibility: hidden; */ visibility: hidden; } </style>
    </head>
    
    <body>
        <div id="fu" class="clear">
            <div>1</div>
            <div>2</div>
        </div>
        <p>想到了吗？？？</p>
    </body>
    
    </html>

**3.4 父级添加双伪元素法**

.clearFix::after,
            .clearFix::before {
                content: '.';
                line-height: 0;
                font-size: 0;
                height: 0;
                display: block;
                clear: both;
            }