`

css float 之后br标签不换行问题

CSS 
阅读更多

<div>aaa</div>

<br/><div>bbb</div>

 <br/><div>ccc</div>

这样写br是可以正常换行的

而像下面的写法,br似乎不能换行

<div style="float:left;">aaa</div>

<br/>

<div  style="float:left;">bbb</div>

 <br/>

<div  style="float:left;">ccc</div>

修改之后,依旧能正常换行

<div style="float:left;">aaa</div>

<div clear:both;></div>

<br/>

<div  style="float:left;">bbb</div>

<div clear:both;></div>

 <br/>

<div  style="float:left;">ccc</div>

 

clear:both;清楚浮动后,换行就有效果了

分享到:
评论

相关推荐

    html中div不自动换行、强制不换行的具体实现

    这段CSS代码会使得所有`div`元素中的内容不会自动换行,直到遇到`&lt;br&gt;`标签或者手动换行符`\n`。 4. 使用`float`属性实现不换行 `float`属性在CSS中通常用于元素浮动布局。当元素使用`float`属性后,它会脱离文档...

    H5+CSS3.zip

    效果标签:&lt;br /&gt;标签实现换行效果,特殊字符&nbsp;实现空格效果,标签实现水平线; 列表标签:使用&lt;ul&gt;&lt;li&gt;实现无序列表,使用&lt;ol&gt;&lt;li&gt;实现有序列表; 使用标签添加图片,使用标签添加链接,使用table添加表格,...

    css 标题一行图片 两行文字的排列方法以及相关问题处理

    为了实现两行文字,可以使用`&lt;p&gt;`或`&lt;div&gt;`标签来分隔这两行,并通过CSS控制间距和换行。 ```html 标题图片"&gt; 第一行文字 &lt;br&gt; 第二行文字 ``` ```css .title-text { display: inline-block; margin-...

    css排版技巧 实用

    尽管CSS为网页设计带来了革命性的变化,但在实际应用过程中,设计师们也发现了一些仅靠CSS难以解决的问题。例如,当需要在网页上展示一系列缩略图,并且每个缩略图下方都有一个简短的标题时,如何实现这些元素按列...

    struts2对于checkboxlist的换行

    3. **模板逻辑**:在FreeMarker模板中,可以通过计数器来追踪已渲染的复选框数量,当达到一定数量时,插入换行标签`&lt;br&gt;`,实现动态换行。 4. **自定义标签库**:如果需要更复杂的逻辑,可以创建自定义标签库,定义...

    DIV+CSS网页布局基础-常用HTML标签介绍

    在网页设计领域,`DIV` 和 `CSS` 是构建现代网页布局不可或缺的元素。`DIV`(Division,分块)是HTML中的一个通用容器标签,它允许我们将网页内容分割成独立的、可样式化的区域。而`CSS`(Cascading Style Sheets,...

    css-dictionary(CSS常用英语词汇详解)

    程序中存在的问题或缺陷,导致程序行为不符合预期。 - **Body**: 主体。HTML文档的主体部分,由`&lt;body&gt;`标签包裹。 - **Building**: 构建。此处特指网站或网页的设计与开发过程。 - **Bold**: 粗体。用于描述文字的...

    html + css 中文手册.rar

    3. 段落和换行:`&lt;p&gt;`用于段落,`&lt;br&gt;`用于单行换行。 4. 文本格式化:`&lt;strong&gt;`, `&lt;em&gt;`, `&lt;u&gt;`, `&lt;del&gt;`等标签用于加粗、斜体、下划线和删除线。 5. 链接:`&lt;a&gt;`标签用于创建超链接。 6. 图像:`&lt;img&gt;`标签插入...

    HTMLl5+CSS总结笔记.docx

    - **单标签**:如`&lt;br/&gt;`或`&lt;hr/&gt;`,不需要闭合标签。 - **标签之间的关系**: - **嵌套关系**:如`&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;`。 - **并列关系**:如`&lt;div&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;`。 - **Doctype声明**:文档类型声明,告知...

    使用CSS解决文字环绕图片问题的代码

    文字部分通过`&lt;br&gt;`标签换行,自然绕过图片显示。 #### 三、注意事项及优化建议 - **兼容性考虑**:虽然`float`属性在大多数现代浏览器中都能很好地工作,但在一些旧版本浏览器中可能存在兼容性问题。开发者需要...

    HTML_CSS学习笔记.docx

    - 浮动(float)、定位(position)以及新的布局模式,如 Flexbox(弹性盒模型)。 14. Flexbox: - 提供了一种灵活的布局方式,允许内容沿主轴和交叉轴方向自动调整。 15. CSS3 样式设置小技巧: - 使用预...

    css开发字典

    - 在CSS中可能指针对特定浏览器的兼容性问题的解决方案。 **Hand(手)** - 鼠标指针的样式之一,当用户将鼠标悬停在链接上时显示。 - 可以通过`cursor: pointer`设置。 **Image(图像)** - 图片或照片,可以作为...

    随手记的div+css的小抄代码

    - `&lt;br/&gt;`: 行内换行,用于强制换行而不形成新的段落。 - `&lt;span&gt;`: 行内容器,常用于应用样式或脚本操作。 3. **列表标签:** - `&lt;ul&gt;` 和 `&lt;li&gt;`: 无序列表及其列表项。 - `&lt;ol&gt;` 和 `&lt;li&gt;`: 有序列表及其...

    Html和CSS网页标准指南.pdf

    - 标签和文本:HTML标签内可以包含文本和其他标签,通过闭合标签来结束一个元素,如`&lt;br/&gt;`表示换行,`&lt;em&gt;`和`&lt;strong&gt;`分别表示强调和重要内容。 知识点二:CSS基础 - CSS的作用:CSS用于控制HTML文档的显示,...

    Css参考手册

    - 所有标签必须闭合,即使是自闭和的标签(如`&lt;br&gt;`、`&lt;img&gt;`)也需写成`&lt;br/&gt;`、`&lt;img src="..." alt="..."/&gt;`。 - 标签名和属性名必须小写。 - 属性值必须用引号括起。 - 不允许省略某些可选的标签,如`&lt;p&gt;`标签内...

    网页设计语言教程(HTML_CSS)

    - 段落与换行:`&lt;p&gt;`用于创建段落,`&lt;br&gt;`用于插入单行换行。 - 链接:`&lt;a&gt;`标签定义超链接,通过`href`属性指定链接目标。 - 图像:`&lt;img&gt;`标签插入图片,`src`属性指向图片路径,`alt`属性提供文字描述。 2. ...

    CSS多浏览器兼容性[定义].pdf

    对于不支持这些属性的旧版本IE,可以使用`&lt;br style="clear:both" /&gt;`或`&lt;div style="clear:both"&gt;&lt;/div&gt;`来强制断行。 10. **CSS hack**:针对特定浏览器的CSS特性,如`_height`、`*height`等,是解决兼容性问题的...

    HTML+CSS入门到精通实例文件

    7. **段落和换行**:`&lt;p&gt;`定义段落,`&lt;br&gt;`实现换行。 8. **头部元素**:`&lt;head&gt;`包含文档元信息,如字符集`&lt;meta charset="UTF-8"&gt;`。 9. **链接**:`&lt;a&gt;`标签用于创建超链接,连接到其他网页或资源。 10. **结构...

    python之html和css基础.docx

    - **换行标签**:`&lt;br&gt;`,用于插入换行符。 - **链接标签**:`链接文本&lt;/a&gt;`,用于创建超链接。 - **图片标签**:`替代文本"&gt;`,用于在网页中嵌入图像。 - **列表标签**: - 无序列表:`&lt;ul&gt;&lt;li&gt;列表项1&lt;/li&gt;&lt;li&gt;...

Global site tag (gtag.js) - Google Analytics