Home  >  Article  >  Web Front-end  >  Summary of DIV CSS floating issues [increasing]_html/css_WEB-ITnose

Summary of DIV CSS floating issues [increasing]_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:30:19955browse

1.
To solve the margin problem, you can usually add the border:1px solid #333; attribute to different divs. Use this to see which layer is stretched open.
-------------------------------------
The most common ones in ie will be The problem with opening is


Because the float attribute of ff will be messed up, so when we arrange the last layer of each layer with float attribute, it will Add such a layer to turn off the float attribute of ff.
But this layer will occupy a certain spacing when placed in ie6. The solution is:

------------- -------------------------------------------------- ---------------------------------------------
2.
When applying floating margin, double distance will appear in IE6. Note that it only appears in IE6. Usually this phenomenon can be solved by using _margin, which is a hack for IE6.
-------------------------------------------------- -------------------------------------------------- --------
3.
The margin set for a div set to float under IE will be doubled. This is a bug that exists in ie6. The solution is to add display:inline;
to this div. For example: <#div id="imfloat">
The corresponding css is
#IamFloat{ float:left;
margin :5px;/*Under IE, it is understood as 10px*/ display:inline;/*Under IE, it is understood as 5px*/}
That is, just add the sentence display:inline.

Padding and margin of UL
ul tag has padding value by default in FF, but in IE only margin has value by default, so define
ul
{margin:0 first ;padding:0;}
----------------------------------------- -------------------------------------------------- --------------
4.

For this piece of code, if you add float:right;
to the span, the time of the right float will sink a certain distance
Solution:
Give li a Add a display:inline-block;float:left; attribute;
li a{display:inline-block;float:left;}
2. Directly swapping the a tag with the span tag can also solve the problem :
  • [February 18, 2009]Cangkou Store-Happy Weike Shopping to spend February 2nd

  • Reason: The label is converted into a block-level element by adding float
    ------------------------ -------------------------------------------------- -------------------------------
    5.
    For left-floated elements, it starts from the rightmost end , float left until you hit the first obstacle, place yourself next to it
    -------------------------- -------------------------------------------------- ----------------------------
    6.
    Clear the float method:
    1, use
    is placed behind a floating div or other element to clear the floating. This will increase redundant HTML code and is not recommended!
    2. Define css in the outer element, as follows:


    < /div>
    css is as follows:
    .wrapperElem{ overflow:hidden; width:auto;}
    .innerElem{ float:left;}
    This will clear the floating problem of innerElem. Pay attention to the css of the outer element. If the width here is removed, you will find that there is a problem in IE6. If you do not write width; adding _height:1% can also solve it

    Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn