css中关于浮动属性float的问题!谢谢!

发布网友发布时间：2022-04-06 10:29

我来回答

共7个回答

懂视网时间：2022-04-06 14:50

本篇文章给大家带来的内容是关于css中flaot浮动的原因及带来的问题分析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

flaot浮动的原因与副作用

float中的四个参数

left，right，none，inherit

float 浮动的原因

使用浮动之后，元素会脱离标准的文档流。（标准的文档流就是按照不同的元素种类，如块元素，行元素按照各自的特点去排列显示，虽然属性不同，但都是按照从上到下，从左到右的顺序进行排列）

float 浮动的副作用

两个块级元素，会被浮动元素覆盖
这里写图片描述

<style type="text/css">
 .box{
  border: 4px solid #000000; 
  width: 200px; 
  height: 200px; 
  display: inline-block; 
  }
 .itemSmall_1{
  background-color: chartreuse; 
  width: 40px; 
  height: 40px; 
  border: 2px solid #000000; 
  /* float: left; */
 }
 .itemSmall_2{
  background-color: chartreuse; 
  width: 40px; 
  height: 40px; 
  border: 2px solid #000000; 
  float: left; 
  }
 .itemBig{
  background-color: blue; 
  width: 150px; 
  height: 150px; 
  border: 2px solid #000000; 
  }
 </style><body>
 <div class="box">
 <div class="itemSmall_1">

 </div>
 <div class="itemBig">

 </div>
 </div>
 <div class="box">
 <div class="itemSmall_2">

 </div>
 <div class="itemBig">

 </div>
 </div>
 </body>

*一个块元素，一个行内元素。行内元素如文字会浮动在浮动元素的周围，为浮动元素留出空间。
这里写图片描述

<style type="text/css">
 .box{
  border: 4px solid #000000; 
  width: 200px; 
  height: 200px; 
  display: inline-block; 
  vertical-align: top; 
  }
 .itemSmall_1{
  background-color: chartreuse; 
  width: 40px; 
  height: 40px; 
  border: 2px solid #000000; 
  /* float: left; */
 }
 .itemSmall_2{
  background-color: chartreuse; 
  width: 40px; 
  height: 40px; 
  border: 2px solid #000000; 
  float: left; 
  }
 .itemBig{
  background-color: blue; 
  width: 150px; 
  height: 150px; 
  border: 2px solid #000000; 
  }
 </style>
 <body>
 <div class="box">
 <div class="itemSmall_1">
 </div>
 <div class="itemBig">
 </div>
 </div>

 <div class="box">
 <div class="itemSmall_2">
 </div>
 行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素 </div>
 </body>

*两个块级元素浮动，出现父元素塌缩
这里写图片描述

<style type="text/css">
 .box{
  border: 4px solid #000000; 
  float: left; 
  }

 .itemSmall_2{
  background-color: chartreuse; 
  width: 40px; 
  height: 40px; 
  border: 2px solid #000000; 
  float: left; 
  } 
 .itemBig2{
  background-color: blue; 
  width: 150px; 
  height: 150px; 
  border: 2px solid #000000; 
  float: left; 
  }
 </style>
 <body>
 <div class="box">
 <div class="itemSmall_2">
 </div>
 <div class="itemBig2">
 </div>
 </div>
 </body>

热心网友时间：2022-04-06 11:58

嗯，如果你想不换行的话，可以删除"clear：left;“这样他就会挨着float块显示而不会换行了.

热心网友时间：2022-04-06 13:16

你把clear的意思弄错了，首先clear是清除块浮动之间不换行内联（可看作清除inline），注意clear只清除内联（清除inline）不会清除浮动！
所以你的float和clear的div其实还是保留浮动的（float:left），clear中有clear:left清除了clear中的左浮动带来的跟float div左内联的属性，因此clear div换行了

热心网友时间：2022-04-06 14:51

clear:left;意思是相对前面的元素而言的，用于清除前面的float:left元素，不会加入浮动流，所以会换行
float:left 意思是相对自己来说的，自己向左浮动追问但是它包含在第二个的定义括号里了啊？请问？

热心网友时间：2022-04-06 16:42

第一个float是让后面的元素接上，后面的元素清了浮动，那么这个元素就会另起一行，在再加上浮动的话，受影响的是后面的元素。

热心网友时间：2022-04-06 18:50

clear的意思是清楚之前的浮动而不是清楚你当前css里面的浮动也就是你的.float里面的 float:left没有了

热心网友时间：2022-04-06 21:15

你写的就是错误的，你这个类又清除浮动又给他了一个浮动，自相矛盾，正确写法是谁想清除浮动，哪个元素加clear:both;