HTML09 浮动、简单的页面布局、高度塌陷

最新推荐文章于 2022-07-31 16:59:46 发布

ฅ逸魚

最新推荐文章于 2022-07-31 16:59:46 发布

阅读量115

点赞数

分类专栏： HTML+CSS 学习笔记文章标签： html css

本文链接：https://blog.csdn.net/weixin_47186832/article/details/110330126

版权

HTML+CSS 学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、浮动

使用行内块元素：
- 块元素在文档流中默认垂直排列
- display:inline-block; 可以将块元素横向分布
- 中间多余的间距是因为各个div之间没有紧紧的挨在一起，比如：
- <div class="box1"></div><div class="box2"></div><div class="box3"></div>
- 如果希望块元素在页面中水平排列，可以让块元素脱离文档流
使用 float 来使元素浮动，从而脱离文档流
- 可选值：
  - none ：默认值，元素默认在文档流中排列
  - left ：元素会立即脱离文档流，向页面左侧浮动
  - right ：元素会立即脱离文档流，向页面右侧浮动
- 当为一个元素设置浮动以后（float属性是一个非none的值）
  - 元素会立即脱离文档流，元素脱离文档流之后，下边的元素会立即向上浮动
  - 元素浮动以后，会尽量向页面左上或者是右上漂浮
  - 直到浮动到父元素的边框或者其他浮动元素停止
  - 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
  - 如果想改变位置，可以把两个块元素换位置，或者让上面的块元素也浮动
  - 浮动的元素不会超过他的上边的兄弟元素，最多一边齐
  - ```
  <style>
  .box1{
  	float:left;
  	width:200px;
  	height:200px;
  	background-color:#bcf;
  }
  .box2{
  	float:right;
  	width:200px;
  	height:200px;
  	background-color:#baf;
  }
  .box3{
  	float:right;
  	width:200px;
  	height:200px;
  	background-color:#b6f;
  }
  </style>
  <body>
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
  </body>
```

浮动的元素不会盖住我们的文字，文字会自动环绕在浮动的周围

我们可以通过浮动来设置文字环绕图片的效果

<style type="text/css">
*{margin:0; padding:0;}
.box4{
	width:200px;
	height:200px;
	background-color:#bff;
	float:left;
}
.p1{height:400px;background-color:#f5f;}
</style>
<body>
    <div class="box4"></div>
    <p class="p1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</body>

在文档流中，子元素的宽度默认占父元素的全部
- 块元素脱离文档流之后，高度和宽度都被内容撑开
- 当元素设置设置为浮动以后，高度和宽度都被内容撑开
- 内联元素脱离文档流之后以后会变成块元素
- ```
<style type="text/css">
.box5{background-color:#bff; float:left;}
.s1{
	float:left;	
	width:100px;
	height:100px;
	background-color:red;	
}
</style>

<body>
<div class="box5">哈哈哈哈哈哈</div>
<span class="s1">哈哈哈哈哈哈</span>
</body>
```

2、简单的页面布局

<style type="text/css">
	/*首先清除样式*/
*{margin:0; padding:0;}
	/*设置头部div*/
.header{
	width:1000px;
	height:160px;
	background-color:#bcf;
	margin:0 auto;	
}
	/*设置中间div*/
.content{
	width:1000px;
	height:400px;
	background-color:#fcf;
	margin:10px auto;	
}
	/*设置底部div*/
.footer{
	width:1000px;
	height:160px;
	background-color:#bca;
	margin:0 auto;	
}
	/*设置content里面小div的样式*/
	/*块元素默认在文档流里面垂直排列*/
.content-left{
	width:200px;
	height:100%;
	background-color:#bc1;
	float:left;
}
.content-center{
	width:580px;
	height:100%;
	background-color:#bc8;
	float:left;
	margin:0 10px;
	/*这里的外边距增加了总长度，所以要在width里面减掉*/
}
.content-right{
	width:200px;
	height:100%;
	background-color:#bcd;
	float:left;
}
</style>

<body>
	<!--头部div -->
<div class="header"></div>

	<!--主题内容div -->
<div class="content">
<div class="content-left"></div>
<div class="content-center"></div>
<div class="content-right"></div>
</div>

	<!--底部div -->
<div class="footer"></div>
</body>

3、高度塌陷问题

高度塌陷定义
- 在文档流中，父元素的高度默认是被子元素撑开，子元素多高，父元素多高
- 但是，当为子元素设置浮动以后，子元素会完全脱离文档流
- 此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
- 由于父元素的高度塌陷了，则父元素的所有元素都会向上移动
- 这样将会导致页面布局紊乱，所以在开发中一定要避免高度塌陷问题
高度塌陷方法
- 方法一：
  - 可以把父元素的高度写死，避免高度塌陷问题
  - 但是父元素的高度将不能自适应子元素的高度（不推荐使用）
- 方法二：
  - 根据W3C的标准，在页面中元素都有一个隐含属性叫做
  - Block Formatting Context(块级格式化环境)
    - 简称：BFC
    - 该属性可以设置打开或者关闭，默认关闭
    - 当开启元素的BFC之后，元素具有如下特性：
      - 1、父元素的垂直外边距不会和子元素重叠
      - 2、开启BFC的元素不会被浮动元素覆盖
      - 3、开启BFC的父元素可以包含浮动的子元素
    - 如何开启BFC：
      - 1、设置元素浮动：使用这种方式会导致父元素宽度的丢失，并且导致下面的元素上移
      - 2、设置元素的绝对定位：与上面一样
      - 3、设置元素的 inline-block：可以解决下面元素上移问题，但任然会导致宽度丢失
      - 4、将元素的 overflow 设置为一个非 visible（默认值）的值，可用：auto,hidden
      - 可以将 overflow 设置为 hidden 是副作用最小开启BFC的方式
        出现问题的情况：如果父元素里面出现有相对定位的元素，而里面又设置了overflow：hidden时
        相对定位，如果元素移动到父元素以外，元素就看不到了
    - 在IE6及以下的浏览器中不支持BFC，可以使用这种方式不能兼容IE6
      - 在IE6中，虽然没有BFC，但是又另一个隐含属性：hasLayout
      - 该属性的作用和BFC类似，所以在IE6浏览器可以通过开启hasLayout来解决
      - 开启方式（副作用最小的）：直接将元素的zoom设置为1
        zoom:1；（不放大元素，而是开启hasLayout）
        zoom表示放大的意思，后面跟着的数值，写几就放大几倍
        zoom只支持IE，其他浏览器不支持
- 方法三：
  - 可以直接在高度塌陷的父元素的最后，加上一个空白的div
    - 由于这个div没有浮动，所以它可以撑开父元素的高度
    - 然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度
    - 并且基本没有副作用
    - 使用这种方案虽然可以解决问题，但是会在页面中添加多余的结构（在body里面
  - 由于受到box1的浮动的影响，box2整体向上移动
    - 有时候希望清除其他元素浮动对当前元素产生的影响
    - 这时候需要clear来完成
    - clear可以用来清除其他浮动元素对当前元素的影响
      - 可选值：
        none ：默认值，不清除浮动
        left ：清除左侧浮动元素对当前元素的影响
        right ：清除左侧浮动元素对当前元素的影响
        both ：清除两侧浮动元素对当前元素的影响,清除对他影响最大的那个元素的浮动
- 方法四：
  - 通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动
  - 这样可以达到一样的效果，而且不会在结构中添加，而是在样式里面
  - 几乎没有副作用
  - 但是在IE6中不支持，任然需要zoom来改变

<style type="text/css">
/*方法二*/
.box1{
	border:10px red solid;
	zoom:1;
	overflow:hidden;
}
.box2{
	width:100px;
	height:100px;
	background-color:#bcf;
	float:left;	
}
.box3{height:100px; background-color:#a9f;}

/*方法三*/
.box4{
	width:100px;
	height:100px;
	background-color:#b1f;
	float:left;
}		
.box5{
 /*清除box1浮动对box2的影响*/
	clear:left;
	width:200px;
	height:200px;
	background-color:#b7f;
	float:right;
}
.box6{
	clear:right;
	width:300px;
	height:300px;
	background-color:#bcf;
}
	
/*方法三	*/
.box7{border:10px red solid;}
.box8{
	width:100px;
	height:100px;
	background-color:#bcf;
	float:left;	
}
.clear{clear:both;}

/*方法四*/
.box11{border:10px red solid;}
.box12{
	width:100px;
	height:100px;
	background-color:#bcf;
	float:left;
}
.box11:after{
/*添加一个空白内容*/
	content:"";
/*将空白内容转换为一个块元素*/
	display:block;	
/*清除两侧的浮动*/
	clear:both;
	zoom:1;
}

/*经过修改的clearfix是一个多功能的
	既可以解决高度塌陷问题，又可以确保父元素和子元素的垂直外边距不会重叠*/
.clearfix:after , .clearfix:before{
	content:"";
	display:table;
	clear:both;
}
.clearfix{zoom:1;}
</style>

<body>
<!--方法二 -->
<div class="box1">
	<div class="box2"></div>
</div>
<div class="box3"></div>
        
<!--方法三 -->
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7">
	<div class="box8"></div>
	<div class="clear"></div>
</div> 
 
 <!--方法四 -->
     <div class="box11 clearfix">
        <div class="box12"></div>
      </div>
 </body>