css中flaot浮动的原因及带来的问题分析

来源：懂视网责编：小采时间：2020-11-02 22:07:20

css中flaot浮动的原因及带来的问题分析

css中flaot浮动的原因及带来的问题分析:本篇文章给大家带来的内容是关于css中flaot浮动的原因及带来的问题分析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 flaot浮动的原因与副作用float中的四个参数left，right，none，inheritfloat 浮动的原因使用浮动之后，元素会

推荐度：

点击下载本文 文档为doc格式

导读css中flaot浮动的原因及带来的问题分析:本篇文章给大家带来的内容是关于css中flaot浮动的原因及带来的问题分析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 flaot浮动的原因与副作用float中的四个参数left，right，none，inheritfloat 浮动的原因使用浮动之后，元素会

本篇文章给大家带来的内容是关于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>

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com