`

Div+Css布局（float 效果和clear的作用）

    博客分类：
  • CSS
cssfloatclear 
阅读更多

一、CSS布局属性

Width：设置对象的宽度（width:45px）。

Height：设置对象的高度(Height:45px;)。

Background：设置对象的背景颜色、背景图像。

1.背景颜色

background:#09F;

2.背景图像

background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;

repeat-x代表横向重复，还可以设置repeat-y。

Float: Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。

Float属性有left、right、none三个值，none默认属性不用管，主要是left和right两个属性最常用。

举例：

1.float:left属性

?
1
 

 

 

2.float:right属性

Margin: Margin属性用于设置两个元素之间的距离。（注：在IE6中默认是此属性的双倍值，如何解决请看hack css）

Margin属性设置值说明：

1.单独设置

margin-left:20px;设置左边

margin-right:20px;设置右边

同理上下分别是margin-top:20px;、margin-bottom:20px;

2.简写设置

Margin:10px;设置对象四周。

Margin:10px 5px;设置对象上下为10px,左右为5px;

举例：

Padding: Padding属性用于设置一个元素的边框与其内容的距离。

1.单独设置

padding-left:20px;设置左边

padding-right:20px;设置右边

同理上下分别是padding-top:20px;、padding-bottom:20px;

2.简写设置

padding:10px;设置对象四周。

padding:10px 5px;设置对象上下为10px,左右为5px;

Clear: Clear属性主要是清楚float属性设置的效果，使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。

1、如何在上面的例子中橙色方块的下面另起一行放置一个黑色方块。

我们直接在html中加入一个div试试

我们看到kwstu-kid3跑到1、2的下面去了，原因就是应为kwstu-kid2使用了float属性，解决方法可以直接在kwstu-kid3里面加入clear属性

2、还有一种布局中常见的问题，此处一定要看。

我们把最外层kwstu属性的高度去了，看看什么效果。

跟我们想象的不一样吧，我们想象中应该是kwstu层把kid1和kid2包裹住才对，为什么没有达到我们要的效果呢，原因就是应该kid1和kid2使用了float属性，此时可以使用clear属性清楚一下即可。

一般情况都是在css里面创建一个.clear公共清除浮动类，直接使用一个div调用即可

此问题还有一个解决办法：直接在kwstu样式中加入overflow:hidden;属性即可。

2.还有一个初学div时经常遇到的问题，如果把上边的clear层去掉，然后再在kwstu层下面开始一行新的布局，然后在下面新的div中使用margin-top属性，肯定不管用。这个地方是初学者布局中肯定要遇到的问题，一定要注意。

解决办法：

在kwstu层和kwstu1层直接加一个清除浮动层即可。

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

如何解决子级用float浮动父级div高度不能自适应的问题
 
 
 
 

 

解决子级对象使用css float浮动 而父级div不能自适应高度，不能被父级内容撑开解决方法，父级div没有高度解决方法。

外层父级DIV不能自适应高度-
最外层的父级DIV不能自适应高度-不能随对象撑开没有高度

当在对象内的盒子使用了float后，导致对象本身不能被撑开自适应高度，这个是由于浮动产生原因。

如何解决父div对象自适应高度，方法有三种，接下来DIVCSS5逐一介绍。

1、首先我们先看HTML源代码：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>父div不自适应高度实例</title> 
  6. <style> 
  7. .divcss5{ width:500px; border:1px solid #000; padding:10px} 
  8. .divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
  9. .divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <div class="divcss5"> 
  14. <div class="divcss5-lf"></div> 
  15. <div class="divcss5-rt"></div> 
  16. </div> 
  17. </body> 
  18. </html> 

2、问题效果截图：

外层父级不能css自适应高度撑开截图
子对象使用float后，父div不能自适应高度实例截图

方法一：对父级设置固定高度

此方法可用于能确定父级div内子级对象高度。

假如以上案例，我们知道内部div高度100px,那对父级设置css height为100px看看效果。

1、完整div+css实例html代码（对父div加高度）：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>父div不自适应高度实例</title> 
  6. <style> 
  7. .divcss5{width:500px;border:1px solid #000;padding:10px; height:100px} 
  8. .divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
  9. .divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <div class="divcss5"> 
  14. <div class="divcss5-lf"></div> 
  15. <div class="divcss5-rt"></div> 
  16. </div> 
  17. </body> 
  18. </html> 

2、加高度解决不能撑开子对象使用float效果截图

对父加高度100px解决不能撑开
对父加高度100px 解决外层父div自适应高度截图

此方法缺点，父级是固定高度，而不随内容高度自适应高度，没高度。此方法针对能确定父div内的内容高度情况下使用。

方法二：使用css clear清除浮动

对父级div标签闭合</div>前加一个clear清除浮动对象。

1、加clear效果完整div css代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>父div不自适应高度实例</title> 
  6. <style> 
  7. .divcss5{width:500px;border:1px solid #000;padding:10px} 
  8. .divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
  9. .divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
  10. .clear{ clear:both} 
  11. </style> 
  12. </head> 
  13. <body> 
  14. <div class="divcss5"> 
  15. <div class="divcss5-lf"></div> 
  16. <div class="divcss5-rt"></div> 
  17. <div class="clear"></div> 
  18. </div> 
  19. </body> 
  20. </html> 

2、加css clear解决父div不能自适应高度

使用clear:both清除父级内子对象产生浮动
使用clear:both清除父级内子对象产生浮动

此方法需要注意是clear:both加的位置，不是对父级直接加clear样式，而是在父级</div>前加带clear对象盒子。

方法三：对父级样式加overflow样式

此方法非常简单，也可以作为推荐解决父级不能被撑开自适应高度的方法，可以不增加div盒子对象，只需要对父级加一个overflow:hidden样式即可。

1、完整css div代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>父div不自适应高度实例</title> 
  6. <style> 
  7. .divcss5{width:500px;border:1px solid #000;padding:10px; overflow:hidden } 
  8. .divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
  9. .divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <div class="divcss5"> 
  14. <div class="divcss5-lf"></div> 
  15. <div class="divcss5-rt"></div> 
  16. </div> 
  17. </body> 
  18. </html> 

2、加css overflow方法截图

父div加overflow样式解决父自适应高度
父div加overflow样式解决父自适应高度

推荐。此方法为非常简单解决子用float，父div不能自适应高度，不能随父内容多少而自适应高度没有高度。

 

 

分享到：
| springMVC 的几种返回方式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    用CSS的float和clear属性进行三栏网页布局

    本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。 绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局...

    零基础学HTML CSS源代码

    DIV+CSS布局.html DIV+CSS布局.html div.css 名为div的样式文件。 style.css 名为style的样式文件。 第15章（源代码\第15章） 示例描述：本章演示CSS基础部分知识。 CSS基础.html ...

    CSS网站布局实录 （第二版）PDF版

    ),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国... [显示全部] 《CSS网站布局实录:基于Web标准的网站设计指南...

    firefox中div+css的外层背景色不见的解决方法

    复制代码代码如下: &lt;div class=”header”&gt; &lt;div class=”header_left”&gt;header_left&lt;/div&gt; &lt;div class=”header_right”&gt;header_right&lt;/div&gt; &lt;/div&gt; .header{width:1000px;background:red;} .header .header_left{...

    CSS教程：div设置float后高度不自动增加

    相关文章：https://www.jb51.net/css/divcss-4952.html 　https://www.jb51.net/css/divcss-5991.html 本来想把这个题目修改为“闭合浮动元素”或“清除浮动元素”，但想了一下，还是不修改为好。因为从这个题目我们...

    css常用布局多行多列

    CSS布局常用的方法：float : none | left | right 取值： none :　默认值。对象不飘浮 left :　文本流向对象的右边 right :　文本流向对象的左边 它是怎样工作的，看个一行两列的例子 xhtml: &lt;div id=warp&gt; &lt;div id=...

    利用css的clear属性实现广告文字环绕效果

    利用css的clear属性实现广告文字环绕效果_网页代码站(www.webdm.cn) &lt;div style="float:left;"&gt; &lt;div style="float:left;height:100px;width:1px;"&gt;&lt;!--一个宽为1px的空白层，利用该层的高度控制广告层上下的位置。...

    使用CSS的overflow属性防止float撑开div的方法

    例如：div元素内的两个子元素p都float:left，外面的div会变成没有高度，此时该怎么办呢？通常解法是在排版流里面的元素加一个after的伪元素，将它设成display: block以及clear:both即可解决。 CSS Code复制内容到...

    css浮动(float/clear)使用讲解

    本文以div元素布局为例。教程开始： 首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图： 可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1...

    DIV滑动门代码

    &lt;style type="text/css"&gt; body{ color: #000; font-family: "宋体", arial; font-size: 12px; background: #fff; text-align: center; margin: 0; } .nTab{ float: left; width: 240px; margin: 0 auto; border-...

    如何终止DIV的float属性简单实现

    终止 DIV 的 float 属性，在 css 里面定义一个样式 复制代码代码如下: .clear_float { clear: both; } 页面使用时加上一行 &lt;div class=clear_float&gt;&lt;/div&gt; 后面的 div 将不再 float。

    css入门笔记

    大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式（就近原则） 3.内联样式 4.!important; 绝对优先使用（） 格式 p{ color:red !important; } 2.css选择器 1.选择器的作用 规范...

    DIV设置 float以后使下一个DIV另起一行的方法

    这是在CSS中的.export下加入float:left以后会使随后跟上的BUTTON标签跟在DIV后面，这是就须在两者之间加入一个CLASS为clear（可以自己起名字）的DIV，如下图所示：  复制代码代码如下:&lt;div runat=”server” ...

    css之clearfix的用法深入理解(必看篇)

    如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有 clear，导致不能被撑开。看下面的例子：Div布局如下： Css代码如下： CSS Code复制内容到剪贴板 .out{border:1px solid...

    用clearfix:after消除css浮动解决外部div不能撑开问题

    在写HTML代码的时候，创造在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。看下面的例子： 复制代码代码如下: ...

    div清除浮动css样式代码分享(4种方法)

    1、结尾处加空div标签 clear:both 复制代码代码如下:.div1{background:#000080;border:1px solid red；}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;...

    浅谈CSS中的clear清除浮动

    1、CSS中的clear有四个参数： none：允许两边都可以浮动。 left：不允许左边有浮动。 right：不允许右边有浮动。 both(默认)；不允许有浮动。 2、一开始在CSS中clear浮动是默认both，也就是说一开始不能有浮动的。 3...

    css清除浮动的几种方法和示例

    1、【.clr{clear:both;}】，设置了clear属性的元素，其上边框会紧贴着浮动元素的margin-bottom边界位置渲染，忽略其margin-top设置。...background:#FFF} .divcss5-left{ float:left} .divcss5-right{ float:r

Magicbox
Global site tag (gtag.js) - Google Analytics