css中br标签为什么是内联元素

html-css016

css中br标签为什么是内联元素,第1张

br 不是内联标签，也不是块，他只是属于HTML中的一个特殊语法。或者换句话来说。br就是一个换行的标记，出了换行你能看到效果以外，其他的什么都看不到。当然，如果他有一部分是满足内联元素的特性的 ，但不能完全说他是内联，因为他啊无法添加display属性，而内联标签可以添加任何属性。

四种清除浮动方法如下：

1、使用空标签清除浮动。

我用了很久的一种方法，空标签可以是div标签，也可以是p标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义css代码：clear:both。此方法的弊端在于增加了无意义的结构元素。

对于使用额外标签清除浮动（闭合浮动元素），是w3c推荐的做法。至于使用

元素还是空

可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是，

本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空

比较合适。

<!–

*{margin:0padding:0}

body{font:36px

bold

color:#f00

text-align:center}

#layout{background:#ff9}

#left{float:leftwidth:20%height:200pxbackground:#dddline-height:200px}

#right{float:rightwidth:30%height:80pxbackground:#dddline-height:80px}

.clear{clear:both}

–>

left

right

2、使用overflow属性。

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义css属性：overflow:auto，即可！也可以用overflow:hidden；”zoom:1″用于兼容ie6，也可以用width:100%。

不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；

<!–

*{margin:0padding:0}

body{font:36px

bold

color:#f00

text-align:center}

#layout{background:#ff9overflow:autozoom:1

}

/*

overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/

#left{float:leftwidth:20%height:200pxbackground:#dddline-height:200px}

#right{float:rightwidth:30%height:80pxbackground:#dddline-height:80px}

–>

left

right

3、使用after伪对象清除浮动。

该方法只适用于非ie浏览器

。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

<!–

*{margin:0padding:0}

body{font:36px

bold

color:#f00

text-align:center}

#layout{background:#ff9}

#layout:after{display:blockclear:bothcontent:”"visibility:hiddenheight:0}

#left{float:leftwidth:20%height:200pxbackground:#dddline-height:200px}

#right{float:rightwidth:30%height:80pxbackground:#dddline-height:80px}

–>

left

right

4、浮动外部元素，float-in-float。这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。

但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化，所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。

<!–

*{margin:0padding:0}

body{font:36px

bold

color:#f00

text-align:center}

#layout{background:#ff9float:left}

#left{float:leftwidth:20%height:200pxbackground:#dddline-height:200px}

#right{float:rightwidth:30%height:80pxbackground:#dddline-height:80px}

–>

left

right

1，<br>可插入一个简单的换行符。

<br>标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。

请注意，<br>标签只是简单地开始新的一行，而当浏览器遇到 <p>标签时，通常会在相邻的段落之间插入一些垂直的间距。

如下这个示例：

<html>

<body>

<p>

测试<br />测试文字<br />这是第三行了

</p>

</body>

</html>

2，<hr>标签在 HTML 页面中创建一条水平线。

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

如下这个示例：

<html>

<body>

<p>hr 标签定义水平线：</p>

<hr />

<p>这是段落。</p>

<hr />

<p>这是段落。</p>

<hr />

<p>这是段落。</p>

</body>

</html>