div设置float后下一个div要换行的解决办法

div设置float之后，如果没有清除，则下一个被设置float的div会根据上一个float的div的布局进行排版；而下一个没设置float属性的div则是根据它的前一个元素进行排版。
要清除float属性，只能使用style=”clear:both”。注意，clear:both不能脱离style独立存在。且clear:both仅对容器元素有效，对非容器元素无效。
另外<br />和<p>的换行高度是固定的，不能根据设置为float的元素高度动态调整。但是使用完它们会有相当于clear:both的效果，可以看到下图中下一个设置为float的div，从下一行的左侧开始排版，而不是接在上一个后面。

<html><head><style type="text/css">body { background-color:yellow; }.floatDiv { height:50px;background-color:red;float:left; }</style></head><body><div class="floatDiv">only div</div><div>Div2</div><div>Div3</div><div class="floatDiv">only button</div><button>button</button><div>Div3</div><div class="floatDiv">button clear:both</div><button style="clear:both">button</button><div>Div3</div><div class="floatDiv">button br</div><br/><button>button</button><div>Div3</div><div class="floatDiv">Div4</div><div class="floatDiv">button p</div><p><button>button</button><div>Div3</div><div class="floatDiv">Div4</div></p><div class="floatDiv">div clear:both</div><div style="clear:both">Div2</div><div>Div3</div><div class="floatDiv">paragraph clear:both</div><p style="clear:both">paragraph</p><div>Div3</div></body>
</html>

div设置float后下一个div要换行的解决办法相关推荐

html两个div浮动后下一个div怎么换行的问题
欢迎访问我的个人博客:机器学习之路刚开始学习网页前端,不懂得问题挺多,总在网上查找相关知识点,但是东西一旦多了就特别难记全了,今天又查东西突然发现别人都是查完以后把东西写一遍文章记下来 ...
HTML里子DIV设置margin-top后影响父DIV位置的解决办法
在HTML里,子DIV元素设置了margin-top后,在与父元素之间没有任何其他元素的情况下,会影响到父DIV的位置. 一.编写代码. <!DOCTYPE html> <html ...
el-table-column设置fixed后，el-popover出现两个的解决办法。
设置一个隐藏 1.:ref="`popover-${row.id}` 2.const key = "popover-" + idthis.$nextTick(() =&g ...
html不能超出div的宽度,DIV设置width后超出父元素应该如何解决
这次给大家带来DIV设置width后超出父元素应该如何解决,解决DIV设置width后超出父元素的注意事项有哪些,下面就是实战案例,一起来看一下. 前言本文介绍的是利用CSS3的新属性box-siz ...
设置float后，后面的元素位置问题。
这个主要看后面这个元素是块级元素还是行级元素.如果后面的元素是块级元素.例如 <style>#one{height:50px;width:100px;float: left;backgro ...
html div显示页面中间,使一个div始终显示在页面中间
使一个div始终显示在页面中间假设我们有一个div层: 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样: *{margin:0;padding:0;} #myDiv{wi ...
将div垂直居中放置在另一个div中[重复]
本文翻译自:Vertically centering a div inside another div [duplicate] This question already has answers he ...
[css] 移动页面底部工具条有3个图标，如何平分？在设置边框后最后一个图标掉下去了怎么办？
[css] 移动页面底部工具条有3个图标,如何平分?在设置边框后最后一个图标掉下去了怎么办? flex-wrap nowrap, 一般flex默认就是nowrap white-space:nowrap ...
工业App能否成为继Android和iOS后下一个App开发者的春天？
为什么需要工业互联网平台? 只要会Java或者C或者HTML5就可以开发手机上的App,但是工业App跟手机App不一样,需要跟设备打交道,需要听懂设备.读懂设备. 传统工业应用软件往往开发难度大.开 ...

div设置float后下一个div要换行的解决办法

div设置float后下一个div要换行的解决办法相关推荐

最新文章

热门文章