檬味博客 » 问答 » html5和css篇有关浮动以及如何清除浮动

html5和css篇有关浮动以及如何清除浮动

CSS样式如下：.box1{ float:left; width:200px; height:300px; background:#f00;}/* 设置div对象浮动靠左*/ .box2{ float:right;width:200px; height:300px;background:#0f0;}/* 设置div对象浮动靠右 */ .clear{ clear:both;}/*清除浮动*/html代码如下：
html5和css篇有关浮动以及如何清除浮动
浮动和盒状模型、定位是CSS重点和难点。浮动，就是让div样式层块，向左或向右（靠）浮动。
Float:left 靠左浮动；Float:right 靠右浮动；clear:both清除浮动，简单举例如下：
CSS样式如下：
.box1{ float:left; width:200px; height:300px; background:#f00;}/* 设置div对象浮动靠左*/ .box2{ float:right;width:200px; height:300px;background:#0f0;}/* 设置div对象浮动靠右 */ .clear{ clear:both;}/*清除浮动*/html代码如下：
<div class="divcss5"> <div class="box1">布局靠左浮动</div> <div class="box2">布局靠右浮动</div> <div class="clear"></div><!-- html注释：清除float产生浮动 --> </div>效果如下：

浮动利用好了，再结合相对定位，绝对定位，CSS排版基本上就能搞定了，细节的东西在实践中去体验吧。
2018-06-06
clear：both;不就可以吗2018-06-11
mengvlog 阅读 8 次 更新于 2025-07-20 09:57:11 我来答关注问题0
2 个回答檬味博客专题活动
  • 柯栾情感 html5和css篇有关浮动以及如何清除浮动

    CSS样式如下：.box1{ float:left; width:200px; height:300px; background:#f00;}/* 设置div对象浮动靠左*/ .box2{ float:right;width:200px; height:300px;background:#0f0;}/* 设置div对象浮动靠右 */ .clear{ clear:both;}/*清除浮动*/html代码如下：

  • 懂视生活 html5中float属性造成的换行如何处理

    修改收货地址 比如说，我在编写类似菜单的布局时，“修改地址”一栏就出现了这种现象，当我把想要向右浮动的元素（向右的...

  • myvera HTML5.0,求好心人详解,谢谢

    左内边距（margin为块级元素的内边距）：50px；浮动：左（这个属性不太好理解：float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽...

  • 文暄生活科普 HTML5+CSS3实现简洁好看的侧边栏菜单(6款)

    模板一：经典可切换主题的侧边栏，使用HTML5和CSS3构建，具备动态主题切换功能，为用户提供了丰富的视觉体验。模板二：简洁清爽的侧边栏，采用HTML5和CSS3，设计风格简约，布局清晰，适合多种应用场景。模板三：经典的侧边栏，通过HTML5和CSS3实现，具备良好的交互性和美观性，是设计菜单的优选方案。模板...

  • 文暄生活科普 HTML5+CSS3实现简洁好看的导航菜单(8款)

    首当其冲的是酷炫的悬浮按钮菜单，其支持多级菜单导航，代码简洁，方便直接应用。多种动态效果，让用户体验更上一层楼。紧随其后的是经典简洁下拉3级导航菜单，设计简洁明了，满足不同层次的导航需求。带有动画的按钮切换菜单，利用HTML5和CSS3，实现按钮切换时的流畅动画效果，提升用户体验。下一条是带有...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部