浮动原理

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块表现得就像浮动框不存在一样。

几种举例

<div class="div1">
    div1
</div>
<div class="div2">
    div2
</div>
<div class="div3">
    div3
</div>

css样式

.div1 {
    width: 100px;
    height: 100px;
    background-color: cyan;
}
.div2 {
    width: 100px;
    height: 100px;
    background-color: skyblue;
}
.div3 {
    width: 100px;
    height: 100px;
    background-color: green;
}

正常情况下是：

正常情况.jpg

给所有div加上左浮动

.div1 {
    width: 100px;
    height: 100px;
    background-color: cyan;
    float:left;
}
.div2 {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    float:left;
}
.div3 {
    width: 100px;
    height: 100px;
    background-color: green;
    float:left;
}

浮动框会向左浮动，直到碰到其他框

全部左浮.jpg

修改div1的高度，div2的宽度使div3第一排位置不够左浮

.div1 {
    width: 100px;
    height: 150px;
    background-color: cyan;
    float:left;
}
.div2 {
    width: 300px;
    height: 100px;
    background-color: skyblue;
    float:left;
}
.div3 {
    width: 100px;
    height: 100px;
    background-color: green;
    float:left;
}

div3会另起一行左浮，直到碰到其他的浮动框或包含框

另起一行.jpg

清除浮动

再添加一个div4，不设置浮动，样式如下

.div4{
  width:300px;
  height:300px;
  background: #000;
}

浮动带来的问题.jpg

div4并没有另起一行，而是从左上角开始排布，但是文字缺不在左上角。
如果想要div4正常显示：
1 也给它一个左浮
2 清除浮动

.div4{
  width:300px;
  height:300px;
  background: #000;
  color:white;
  clear:both;
}

清除浮动.jpg

清除浮动后，div4不参与其他浮动框的浮动。

float 属性

left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动，显示在其文本中出现的位置
inherit 从父元素中继承float属性

clear属性

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

实例运用

.news{
  border:1px solid red;
}
.news img{
  float:left;
}
.news p{
  float:left;
}

由于图片和段落设置了浮动脱离了文档流，所以div没有高度

1551352903(1).jpg

解决方法有两个
1 给父div里添加一个没有内容的div，把它设置成clear:none
缺点：需要添加多余的无意义的代码

添加空div.jpg

2 给父div也设置浮动
缺点：下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。

给父元素设置浮动.jpg

overflow属性

规定当内容过大超过超出元素框的时候该做什么

hidden 内容会被修剪，并且其余内容不可见
visible 默认值。内容不会被修剪，会呈现在元素框之外
scroll 内容会被修剪，浏览器会显示滚动条以便查看其余内容
auto 由浏览器定夺，如果内容被修剪，就会显示滚动条
inherit 规定从父元素继承overflow属性的值

浮动练习题

练习题.jpg

<div class="father">
  <div class="top">
    <div class="tp">1</div>
    <div class="tp">2</div>
    <div class="tp">3</div>
    <div class="tp">4</div>
    <div class="tp">5</div>
  </div>
  <div class="middleL">
    <div class="six">6</div>
    <div>
      <div class="eight">8</div>
      <div class="nine">9</div>
    </div>
    <div class="ele">11</div>
  </div>
  <div class="middleR">
    <div class="seven">7</div>
    <div class="ten">10</div>
  </div>
  <div class="twl">12</div>
</div>

.father{
  font-size: 50px;
  text-align:center;
  line-height:100px;
}
.top{
  width:500px;
  height:100px;
  background: green;
}
.tp{
  width:100px;
  height:100px;
  float:left;
}
.middleL{
  float:left;
}
.six{
  width:300px;
  height:100px;
  background:yellow;
}
.eight{
  width:150px;
  height:150px;
  background:brown;
  float:left;
}
.nine{
  color:white;
  width:150px;
  height:150px;
  background:black;
  float:left;
}
.ele{
  width:300px;
  height:100px;
  background:red;
  float:left;
}
.middleR{
  float:left;
}
.seven{
  width:200px;
  height:200px;
  background: palegreen;
}
.ten{
  width:200px;
  height:150px;
  float:left;
  background:pink;
}
.twl{
  width:500px;
  height:100px;
  background:blue;
  float:left;
}

css 浮动 float学习总结