码迷,mamicode.com
首页 > 其他好文 > 详细

清浮动的方法

时间:2021-01-11 11:01:44      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:块元素   元素   面试   lock   flow   试题   har   默认   code   

面试题:如何清浮动
给浮动元素的父元素手动添加一个固定的高度(不推荐)
给浮动元素的父元素设置overflow:hidden/auto
.在浮动元素的父元素结束标签之前加一个具有块元素特点的标签(我们一般用 div),给元素加一个clear:both<divstyle=clear:both"></div>
clearfix去清除浮动
[clear清除浮动] clear:both不允许左右两边有浮动对象(清除左石两边浮动的影响) clear:left不允许左边有浮动对象(清除左边浮动的影啊) clear:right不允许石边有浮动对象(清除右边浮动的影啊) clear:none允许左右两边有浮动对象默认值(不清除左右两边浮动的影响)

 1 <!DOCTYPEhtml>
 2 <html>
 3 <head>
 4 <metacharset="utf-8">
 5 <title></title>
 6 <styletype="text/css">
 7 .left,.right{
 8 width:200px;
 9 height:200px;
10 float:left;
11 }
12 .left{
13 background-color:brown;
14 }
15 .right{
16 background-color:cornflowerblue;
17 }
18 .hrader{
19 border:10pxsolidred;
20 overflow:auto;
21 background-color:#333333
22 }
23 </style>
24 </head>
25 <body>
26 <divclass="hrader">
27 <divclass="left"></div>
28 <divclass="right"></div>
29 <!--<divstyle="clear:both;"></div>
30 <spanstyle="display:block;clear:both;"></span>-->
31 </div>
32 </body>
33 </html>

清浮动的方法

标签:块元素   元素   面试   lock   flow   试题   har   默认   code   

原文地址:https://www.cnblogs.com/webaction/p/14251496.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!