CSS ＜2＞

云影y

已于 2022-02-06 21:55:01 修改

阅读量287

点赞数

文章标签： css css3 前端

于 2022-02-06 21:32:35 首次发布

本文链接：https://blog.csdn.net/weixin_43918232/article/details/122798070

版权

浮动

使一个元素向其父元素左或右侧移动
使块元素脱离文档流
不会从父元素中移出，不超过兄弟元素
不会超过前面的浮动元素
如果浮动元素的上边是一个没有浮动的元素，则无法上移
不会盖住文字（可做文字环绕图片效果）

脱离文档流的特点

块元素：

1.块元素不在页面独占一行

2.宽高默认都被内容撑开

行内元素：行内元素脱离后变成块元素，特点相同

float

可选值	作用
none	默认值元素默认在文档流中排列
left	元素会立即脱离文档流，向页面左侧浮动
right	元素会立即脱离文档流，向页面右侧浮动

例横向导航栏

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

</body>
</html>

清除浮动

clear

此属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

<html>
<head>
<style type="text/css">
img
  {
  float:left;
  clear:both;/*两侧都不出现浮动*/
  }
</style>
</head>
<body>
<img src="/i/eg_smile.gif" />
<img src="/i/eg_smile.gif" />
</body>
</html>

高度塌陷问题

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是，为子元素设置浮动以后，子元素会完全脱离文档流，此时会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题。
我们可以用height将父元素的高度写死，以避免出现高度塌陷问题，但其缺陷是父元素的高度不能自动适应子元素的高度。

解决方法一

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

块格式化上下文包含创建它的元素内部的所有内容.

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

该属性可以设置打开或者关闭，默认是关闭的
当开启元素的BFC以后，元素将会有如下特性：

父元素的垂直外边距不会和子元素重叠
开启BFC的元素，不会被浮动元素所覆盖
开启BFC的元素可以包含浮动的子元素

开启方式

根元素（<html>）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
overflow 计算值(Computed)不为 visible 的块元素（设置 overflow: auto 创建一个新的BFC来包含这个浮动，我们的 <div> 元素现在变成布局中的迷你布局。任何子元素都会被包含进去。）
display 值为 flow-root 的元素（<div> 中的所有内容都会参与 BFC，浮动的内容不会从底部溢出。）
contain 值为 layout、content 或 paint 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width (en-US) 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

例

CSS

.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
}

.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}

<div class="box">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the container.</p>
</div>

修正后

.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    overflow: auto;
}

.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}

解决方法二

创建新<div>避免两个相邻 <div> 之间的外边距合并问题

HTML

<div class="blue"></div>
<div class="red-outer">
  <div class="red-inner">red inner</div>
</div>

CSS

.blue, .red-inner {
  height: 50px;
  margin: 10px 0;
}

.blue {
  background: blue;
}

.red-outer {
  overflow: hidden;
  background: red;
}

解决方法三

可以通过after的伪类向元素的最后添加一个空白的块元素，然后对其清除浮动

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

注：在IE6及以下的浏览器中并不支持BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似

开启hasLayout的开启方式：

直接将元素的zoom设置为1即可（表示不放大元素）

zoom表示放大的意思，后面跟着一个数值，写几就将元素放大几倍
zoom这个样式，只在IE浏览器中支持。

.box1{
				border: 10px red solid;
				zoom: 1;
				overflow: hidden;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}
			.box3{
				width: 1000px;
				height: 100px;
				background-color: yellow;
			}