HTML+CSS基础 为什么要存在br换行标签

html-css020

HTML+CSS基础 为什么要存在br换行标签,第1张

举个例子，你在world文档里面打字，正常情况除非文字横向满了才会自动到下一行，但是有一行内容你只写了一半这段话已经写完了想换一行写，怎么办？你可能会说按回车，没错 是回车，但回车的意义是什么？换行 ，同理html中也一样有些内容可以用br标签换行，可能你会说有其他标签也可以达到换行的啊，没错像块级标签确实可以换行，但是想过没有 直接用<br />换行标签就能解决的是为什么还要加那么标签不麻烦么？比如说一行文字用个p标签方便还是直接加<br />方便？也不是说<br />标签就比其他的好，只是想说一个道理，要实现一个功能方法很多，但html中需要的只是最简洁、最有效的方法，不需要太多冗余的东西在里面

四种清除浮动方法如下：

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