A, div overflow content
.remark-div {
overflow: auto;
height: auto;
max-height: 100px;
}
1, overflow
overflow: auto, the content height exceeds the specified scroll bar will appear
overflow: when hidden, without content exceeding target (div) size
2, you need to set the height
max-height setting a maximum height exceeds the scroll bar is displayed;
height: auo, does not exceed the maximum height setting, so that content is automatically determined height.
Two, div overlap
1, on top of each
Either remove floating or set "div" height, text can not be sure how much to set a fixed height under normal circumstances,
So generally can not set ".div" height (of course, can determine how high the content, in this case ".div" is to set up a highly coverage can solve the problem.).
There are two ways to clear the floating
- clear
.clear{ clear:both} <div class="boxa"> <div class="boxa-l">内容左</div> <div class="boxa-r">内容右</div> <div class="clear"></div> </div>
- overflow:hidden
Of ".boxa" (floating child of the parent box plus overflow: hidden)
2, left and right overlap
Either do not use floating;
Either use a float float;
Either set the margin to DIV style does not use float floating.
For example, here ".aa" corresponding to the fixed width of the box will 300px; the use of the ".bb" corresponding to the box set margin-left: 302px (to greater than 300, the test set himself the desired value) to achieve the phenomenon of coverage do not overlap.
Three, CSS float and clear float
-
CSS float
1, we must first know, div is a block-level element, the exclusive line in the page, a top-down arrangement, which is the legendary flow (standard flow) .
2, the starting point float is: " how to display more than one line in the div element ."
Obviously the standard flow has been unable to meet demand, which use the float.
Let float can be understood as a div element from the standard flow, floating above the standard flow, and the flow is not a standard level.
3, if a div element A is floating, if A is an element on the element is floated, the A element will follow over an element of the edge ( If a line does not fit these two elements, then the A element will be squeezed to the next line) ; if a is a standard element of the flow element is an element, then a relative vertical position does not change, that is to say a top and bottom are always aligned on an element.
div order of the HTML code div determined order.
End near the edge of the page is the front , away from the end edge of the page is the rear .
4, before the floating element, i.e. in the standard flow, is arranged vertically, and then to be understood that the floating transverse arrangement .
Reference: Experience Sharing: CSS float (float, clear) popular explanation
-
Clear float
语法：clear : none | left | right | both
Value:
none: default. Both sides can allow floating objects
left: the left does not allow floating objects
right: the right not allow floating objects
both: do not allow floating objects
CSS for the removal of floating (the Clear) , be sure to keep in mind: This rule only affect the clearance of the element itself, can not affect other elements .
Look at an example:
<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div> .outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;} .div1{width: 80px;height: 80px;background: red;float: left;} .div2{width: 80px;height: 80px;background: blue;float: left;} .div3{width: 80px;height: 80px;background: sienna;float: left;}
这里我没有给最外层的DIV.outer 设置高度，但是我们知道如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了一下影响：
（1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示
添加新的元素以清除浮动 、应用 clear：both；
<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="clear"></div> </div> .clear{clear:both; height: 0; line-height: 0; font-size: 0}
结果：
四、用div写一个方框
效果如下：
代码：
<div style="width:20px;height:20px;border:solid 2px;float:left"> </div> <div style="margin-left:40px;"> 本人謹代表本人 </div>