CSS清除浮动清除float浮动

一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级
对象盒子不能被撑开，这样CSS float浮动就产生了。

1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景
图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float
属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。

特别是上下边的padding和margin不能正确显示。

<!DOCTYPE html>
<html>
<head>
<title>CSS清除浮动 清除float浮动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.boxa {background: #ddd;border: 5px solid green;margin:0 auto; width:400px;/*height: 80px;*/  /*方法一：对父级设置适合CSS高度*//*overflow: hidden; */ /*方法二：父级div定义 overflow:hidden*/
}
.boxb { margin:0 auto; width:400px;
}
.boxa-l { float:left; width:280px; height:80px; border:1px solid #F00;background: black;
}
.boxa-r { float:right; width:100px; height:80px; border:1px solid #F00;background: pink;
}
.boxb { border:1px solid #000; height:40px; background: yellow;
}
.clear{ clear:both
}
</style>
</head>
<body>
<div class="boxa"> <div class="boxa-l">内容左</div> <div class="boxa-r">内容右</div> <div class="clear"></div> <!--方法三：clear:both清除浮动 -->
</div>
<div class="boxb">boxb盒子里的内容</div>
</body>
</html>

清除浮动前：

清除浮动后：

备注：欢迎加入web前端求职招聘qq群：668352707

CSS清除浮动清除float浮动相关推荐

CSS基础学习--16 Float(浮动)
一.定义 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常有用. 元素的水平方向浮动,意味着元素只能左右移动 ...
css中float详解,CSS浮动属性Float详解？史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
CSS排版练习小作业，文字围绕图片显示，基本的float浮动定位
简单的css排版基本的float浮动定位文字围绕图片显示 css代码,float分成两块 <style type="text/css">div.float1{flo ...
html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
CSS清除浮动_清除float浮动
CSS清除浮动方法集合一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...
css(float浮动和clear清除)
教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在di ...
CSS:盒子模型和清除float浮动的三种常用方法
目录一:浮动产生原因: 二:浮动产生副作用: 三:浮动解决方法: QUESTION:CSS盒子模型清除浮动? ANSWER: 一:浮动产生原因: 一般浮动是什么情况呢?一般是一个盒子里使用了CSS ...
CSS清除浮动（float）的三种方式
标题CSS清除浮动(float)的三种方式为什么要清除浮动? 浮动的原理是让图片脱离文档流,直接浮在画面上.我们一般布局都是只设置宽度不设置高度,让内容来填充高度.但利用浮动后会让原本填充的高度消失 ...
横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先: 一.并排在一行的两个div样式有这种情况:ie或者ff下对于子 ...

CSS清除浮动清除float浮动

CSS清除浮动清除float浮动相关推荐

最新文章

热门文章

CSS清除浮动 清除float浮动

CSS清除浮动 清除float浮动相关推荐

最新文章

热门文章

CSS清除浮动清除float浮动

CSS清除浮动清除float浮动相关推荐