浮动布局

浮动布局

float属性定义元素在哪个方向浮动。以往这个属性总是应用于图像，使文本围绕在图像周围。不过在css中，任何元素都可以浮动，浮动元素会生成一个块级框，而不是它本身的何种元素。

在网站开发中需要一行排列多个元素，使用浮动可以方便实线。下买呢是使用浮动排列多个元素。

float

使用浮动可以控制相邻元素间的排列关系。

选项	说明
left	向左浮动
right	向右浮动
none	不浮动

文档流

没有设置浮动的块元素是独占一行的，浮动是对后面元素的影响，下图中第二个元素设置浮动对第一个元素没有影响。

div:first-of-type{
	border: solid 2px red;
}
dib:last-of-type{
	float:left;
	background: green;
}

丢失空间

如果只给第一个元素设置浮动，第二个元素不设置，后面的元素会占用第一个元素空间。

div:first-of-type{
	float: left;
	border: solid 2px red;
}

使用浮动

两个元素都设置浮动后，会并排显示

div:first-of-type{
	float: left;
	border: solid 2px red;
}
div:last-of-type{
	float:left;
	background: green;
}

为第二个元素设置右浮动时将移动到右边

div:first-of-type{
	float: left;
	border: solid 2px red;
}
div:last-of-type{
  float: right;
  background: green;
}

浮动边界

浮动元素边界不能超过父元素的padding

main{
	width: 400px;
	border: solid 2px red;
	overflow: auto;
	padding: 50px;
	background-color: antiquewhite;
	background-clip:content-box;
}

div{
  wodth: 100px;
  height: 100px;
  box-sizing: border=box;
}

div: first-of-type{
  float:left;
  border: solid 2px red;
}

div:last-of-type{
  float:right;
  background: green;
}

浮动转换

元素浮动后会变为块元素包括行元素如span,所以浮动后的元素可以设置宽高。

a{
	float: left;
	width: 300px;
}

清除浮动

不希望元素受到浮动元素的影响，可以清除浮动。

clear

css提供了clear规则用于清除元素浮动影响。

选项	说明
left	左边远离浮动元素
right	右边远离浮动元素
both	左右都远离浮动元素

使用清除浮动

<style>
	div {
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
  }

  div.green {
      border: solid 2px green;
      float: left;
  }

  div.red {
      border: solid 2px red;
      float: right;
  }

  div.blue {
      background: blue;
      clear: both;
  }
</style>
...

<div class="green"></div>
<div class="red"></div>
<div class="blue"></div>

在父元素内部最后面添加一个没有高度的了元素，并使用clear:both 。

<style>
	.clearfix {
      clear: both;
      height: 0;
  }

  div {
      width: 200px;
      height: 200px;
      margin-bottom: 10px;
  }


  div.green {
      border: solid 2px green;
      float: left;
  }

  div.red {
      border: solid 2px red;
      height: 200px;
      float: left;
  }

  div.blue {
      background: blue;
  }
</style>

<article>
        <div class="green"></div>
        <div class="red"></div>
        <div class="clear"></div>
    </article>
    <div class="blue"></div>

after

使用::after伪类为父元素添加后标签，实现清除浮动影响。

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

overflow

子元素使用浮动将不占用空间，这时父元素高度将为0，通过添加父元素并设置overflow属性可以清除浮动。

将会使用父元素产生BFC机制，即父元素的高度计算会包括浮动元素的高度。

article{
	overflow:hidden;
}

页面布局

完成页面布局注意以下几点

1. 首先根据设计稿确定页面大小（主要指宽度，移动端不需要考虑），如 1200px 宽度
2. 水平分割页面主要区域
3. 每个区域中按以上两步继续细分

父容器

一组浮动元素要放在一个父容器中

形状浮动

通过形状浮动可以让内容围绕图片，类似于我们在 word 中的环绕排版。要求图片是有透明度的 PNG 格式。

距离控制

选项	说明
margin-box	外边距环绕
padding-box	内边距环绕
border-box	边线环绕
content-box	内容环绕

外边距环绕

shape-outside: margin-box;

边框环绕

shape-outside: border-box;

显示区域

选项	说明
circle	圆形
ellipse	椭圆
polygon	多边形

圆形

 clip-path: circle(50% at center);

椭圆

clip-path: ellipse(50% 80% at 100% 0);

多边形

clip-path: polygon(50% 0, 100% 100%, 0 100%)

内移距离

使用inset属性控制环绕向内移动的距离。

shape-outside: inset(50px 30px 80px 50px) padding-box;

环绕模式

选项	说明
circle	圆形环绕
ellipse	椭圆环绕
url	图片环绕
polygan	多边环绕

圆形环绕

 shape-outside: circle(50%) padding-box;

椭圆环绕

 shape-outside: ellipse(80px 70px) padding-box;

图片环绕

shape-outside: url(xj.png);

多边环绕

clip-path: polygon(50px 0px, 0 100px, 100px 100px);
shape-outside: polygon(50px 0px, 0 100px, 100px 100px);